Summary of native directives in Vue.js (code)

This article brings you a summary (code) of native instructions in Vue.js. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Directory:

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

1, v-text

Bind the content to be displayed to the tag

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

When bound A certain value is displayed as an HTML value instead of a string (similar to converting innerText to innerHtml)

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

3. v-show and v-if

receive a boolean variable and determine Whether the node is displayed.
Difference:
v-show: Add a display:none to the node
v-if: Determine whether the node exists. If false, the node does not exist, which will cause the DOM node to be redrawn

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

Loop over an array (or object)

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 and v-on

v-bind: Single Bind data
v-on: Bind event

// 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

Bind data in two directions

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

6, v-once

Only bind once, when the bound data changes, the data on the node will not change again

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

Related recommendations:

Angular is used to control elements Introduction to native instructions for displaying or not_AngularJS

Use of Vue instructions

The above is the detailed content of Summary of native directives in Vue.js (code). For more information, please follow other related articles on the PHP Chinese website!