Vue.js中原生指令的总结（代码）-js教程-PHP中文网

本篇文章给大家带来的内容是关于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: ``,
    data: {
        val: '123'
    }
})// 等同于 ： template: `value:{{val}}
立即学习“前端免费学习笔记（深入）”；
`

2、v-html

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

new Vue({    el: '#id',
    template: ``,
    data: {
        val: '123'
    }
})

3、v-show与v-if

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

new Vue({
    el: '#id',
    template:
     `
         
         
    `,
    data: {
        active: false,
        text: 0 
    }
    //  
    //  
    //  })

4、v-for

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

编程高手箴言 chm版

本书是作者十余年编程生涯中的技术和经验的总结。内容涵盖了从认识CPU、Windows运行机理、编程语言的运行机理，到代码的规范和风格、分析方法、调试方法和内核优化，内有作者对许多问题的认知过程和透彻的分析，以及优秀和精彩的编程经验。

下载

new Vue({
    el: '#id',
    template: 
    `
            

                // 遍历数组                
                {{item}}
            
            
                // 遍历对象                
                {{key}} : {{val}}
            
     `,
    data: {
        arr: [1, 2, 3],
        obj1: {
            a: '123',
            b: '456'
            c: '789'
    }
   }
})

4、v-bind与v-on

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

// v-bind

// 简写方式:

// 其中val是data中的数据 // v-on

// 简写方式:

// 其中clickButn是methods中的方法

5、v-model

双向绑定数据

new Vue({
    el: '#id',
    template: 
    `
        
    `,
    data: {        val: '111'
    }
})

6、v-once

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

new Vue({
    el: '#id',
    template: 
    `Text: {{val}}`,
    data: {
        val: '111'
    }
})