07.動态指令和靜态指令

文章目錄

• 1.靜态指令v-once
• 2.動态指令

1.靜态指令v-once

v-once稱為靜态指令，被他标記的标簽調用data中的屬性，隻會調用一次，後續data内容發生改變，不會重新渲染

全局的JavaScript代碼如下：

<script>
    let vm = new Vue({
        el: "#app",
        data: {
            msg:"我是靜态指令",
            attr:'href',
            myattr:"wuyanzu",
            url:"https://www.baidu.com",
            wyz:"吳彥祖",
            tar:"tar",
            get:"get",
        },
        methods: {
            changeText(){
              this.msg = "VUE新特性";
            },
        },
    });
</script>
           

<p v-once :title="msg">{{msg}}</p>
    <p :title="msg">{{msg}}</p>
    <p :title="msg+'hhhhhhhh'">{{msg}}</p>
    <button type="button" @click="changeText">改變内容</button>
           

此時滑鼠放在文字上面，title屬性是：“我是靜态屬性”

點選“改變内容”後，title也随着改變。

2.動态指令

<a :href="url">百度</a>
    <!---v-bind綁定的屬性名可以從data中擷取，但是必須使用中括号包裹-->
    <a v-bind:[attr]="url">百度</a>
    <!--動态參數如果不存在，則表現為null而不是undefined-->
    <!--動态參數的值如果為null，表示清除這個屬性-->
    <!--動态參數中，盡量不要參與計算-->
    <a v-bind:[attrs]="url">百度</a><!--data中不存在attrs-->
    <a :href="url" :[tar+get]="'_blank'">百度</a>
           

注意

tar 和 get之間出現任何的空格和其他字元，則會報錯！！！

注意：HTML中規定，标簽和屬性名忽略大小寫，現階段預設，會把所有的屬性都轉換小寫

這裡雖然引用的是myAttr，但是data中必須存在myattr變量才可以引用