Rumah  >  Artikel  >  hujung hadapan web  >  Vue.js中原生指令的总结(代码)

Vue.js中原生指令的总结(代码)

不言
不言asal
2018-09-07 17:19:121743semak imbas

本篇文章给大家带来的内容是关于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: &#39;#id&#39;,
    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: &#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>})
4、v-for

对数组(或对象)进行循环

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;
    }
   }
})
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: &#39;#id&#39;,
    template: 
    `<p>
        <input type="text" v-model="val">
    </p>`,
    data: {        val: &#39;111&#39;
    }
})
6、v-once

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

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

相关推荐:

Angular用来控制元素的展示与否的原生指令介绍_AngularJS

Vue指令的使用

Atas ialah kandungan terperinci Vue.js中原生指令的总结(代码). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn