Vue.js原生指令

青旅半醒 2022-05-14 10:42 71阅读 0赞

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

##### 2、v-html #####

当绑定的值作为HTML的值显示，而不是字符串(类似于将innerText转为innerHtml)

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

##### 3、v-show与v-if #####

接收一个boolean变量，判断该节点是否显示。  
区别：  
v-show:即在节点上加上一个display:none  
v-if:判断该节点是否存在,false时节点不存在,会引起DOM节点重绘

new Vue({
        el: '#id',
        template:
         `<div>
             <span v-show="active"></span>
             <span v-if="active"></span>
        </div>`,
        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: `<div> <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> </div>`, data: { arr: [1, 2, 3], obj1: { a: '123', b: '456' c: '789' } } })

##### 4、v-bind与v-on #####

v-bind：单向绑定数据  
v-on：绑定事件

// v-bind
    <div v-bind:class="val"></div>
    // 简写方式:
    <div :class="val"></div>
    // 其中val是data中的数据
    
    // v-on
    <div v-on:click="clickButh"></div>
    // 简写方式:
    <div @click="clickButh"></div>
    // 其中clickButn是methods中的方法

##### 5、v-model #####

双向绑定数据

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

##### 6、v-once #####

只绑定一次，当绑定的数据发生改变时，节点上的数据不会再改变

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