Vue.js中原生指令的總結（程式碼）

這篇文章帶給大家的內容是關於Vue.js中原生指令的總結（程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

目錄：

v-text v-html v-show/v-if v-for v-bind/v-on  v-model v -once

1、v-text

給標籤綁定需要顯示的內容

new Vue({
    el: '#id',
    template: `<p v-text="&#39;value:&#39;+val"></p>`,
    data: {
        val: &#39;123&#39;
    }
})// 等同于 ： template: `<p>value:{{val}}</p>`

2、v-html

當綁定的值作為HTML的值顯示，而不是字串(類似於將innerText轉為innerHtml)

new Vue({    el: '#id',
    template: `<p v-html="val"></p>`,
    data: {
        val: &#39;<span>123</span>&#39;
    }
})

3、v-show與v-if

接收一個boolean變量，判斷該節點是否顯示。
區別：
v-show: 即在節點上加上一個display:none
v-if:判斷該節點是否存在,false時節點不存在,會引起DOM節點重繪

new Vue({
    el: '#id',
    template:
     `<p>
         <span v-show="active"></span>
         <span v-if="active"></span>
    </p>`,
    data: {
        active: false,
        text: 0 
    }
    //  <span v-if="active"></span>
    //  <span v-else-if="text === 0"></span>
    //  <span v-if="active"></span>})

4、v-for

對數組(或物件)進行循環

new Vue({
    el: '#id',
    template: 
    `<p>
            <ul>
                // 遍历数组                
                <li v-for="(item,index) in arr" :key="item">{{item}}</li>
            </ul>
            <ul>
                // 遍历对象                
                <li v-for="(val,key,index) in obj1" :key="key">{{key}} : {{val}}</li>
            </ul>
     </p>`,
    data: {
        arr: [1, 2, 3],
        obj1: {
            a: &#39;123&#39;,
            b: &#39;456&#39;
            c: &#39;789&#39;
    }
   }
})

4、v-bind與v-on

v-bind：單向綁定資料
v-on：綁定事件

// v-bind<p v-bind:class="val"></p>// 简写方式:<p :class="val"></p>// 其中val是data中的数据

// v-on<p v-on:click="clickButh"></p>// 简写方式:<p @click="clickButh"></p>// 其中clickButn是methods中的方法

5、v-model

雙向綁定資料

new Vue({
    el: '#id',
    template: 
    `<p>
        <input type="text" v-model="val">
    </p>`,
    data: {        val: &#39;111&#39;
    }
})

6、v-once

只綁定一次，當綁定的資料發生改變時，節點上的資料不會再改變

new Vue({
    el: '#id',
    template: 
    `<p v-once >Text: {{val}}</p>`,
    data: {
        val: &#39;111&#39;
    }
})

相關推薦：

Angular用來控制元素的展示與否的原生指令介紹_AngularJS

Vue指令的使用

#

以上是Vue.js中原生指令的總結（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！