本篇文章给大家带来的内容是关于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="'value:'+val"></p>`, data: { val: '123' }})// 等同于 ： template: `<p>value:{{val}}</p>`
2、v-html当绑定的值作为html的值显示，而不是字符串(类似于将innertext转为innerhtml)
new vue({ el: '#id', template: `<p v-html="val"></p>`, data: { val: '<span>123</span>' }})
3、v-show与v-if接收一个boolean变量，判断该节点是否显示。
区别：
v-show:即在节点上加上一个display:none
v-if:判断该节点是否存在,false时节点不存在,会引起dom节点重绘
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对数组(或对象)进行循环
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: '123', b: '456' c: '789' } }})
4、v-bind与v-onv-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: '#id', template: `<p> <input type="text" v-model="val"> </p>`, data: { val: '111' }})
6、v-once只绑定一次，当绑定的数据发生改变时，节点上的数据不会再改变
new vue({ el: '#id', template: `<p v-once >text: {{val}}</p>`, data: { val: '111' }})
相关推荐：
angular用来控制元素的展示与否的原生指令介绍_angularjs
vue指令的使用
以上就是vue.js中原生指令的总结（代码）的详细内容。