Summary of native directives in Vue.js (code)-JS Tutorial-php.cn

Summary of native directives in Vue.js (code)

不言

Release： 2018-09-07 17:19:12

Original

1764 people have browsed it

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: &#39;#id&#39;,
    template: `<p v-text="&#39;value:&#39;+val"></p>`,
    data: {
        val: &#39;123&#39;
    }
})// 等同于 ： template: `<p>value:{{val}}</p>`

Copy after login

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: &#39;#id&#39;,
    template: `<p v-html="val"></p>`,
    data: {
        val: &#39;<span>123</span>&#39;
    }
})

Copy after login

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: &#39;#id&#39;,
    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>})

Copy after login

4, v-for

Loop over an array (or object)

new Vue({
    el: &#39;#id&#39;,
    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;
    }
   }
})

Copy after login

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中的方法

Copy after login

5, v-model

Bind data in two directions

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

Copy after login

6, v-once

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

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

Copy after login

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!