Vue中内部指令，教你一一使用

1、v-on 用与监听DOM事件；

　　例如：v-on:click  v-on:submit （可简写为@click 、@submit）

2、v-bind 响应并更新DOM，向DOM上绑定属性

　　例如:v-bind:class、v-bind:src （可简写为:class、:src）

3、v-model 用于双休数据绑定

　　例如：<input  v-model="message"  type = "text"/>

4、v-show 条件渲染指令，再DOM中改变样式display，实现隐现

　　例如 <div v-show = "true">实现隐现</div>

5、v-if 条件渲染指令,删除或添加DOM实现隐现

　　例如 <div v-if = "true">实现隐现</div>

6、v-e1se 条件渲染指令,必须跟v-if搭配使用

　　例如 <div v-if = "show==1">show=1时显示</div>

　　　　<div v-else>show≠1时显示</div>

7、v-e1se-if 条件渲染指令,必须跟v-if搭配使用

　　　　<div v-if = "show==1">show=1时显示</div>

　　　　<div v-else-if = "show==2">show=2时显示</div>

　　　　<div v-else>show≠1or2时显示</div>

　　　　ps：三者必须紧紧在一起不能有其他标签元素在它们之间

8、v-html 更新元素的innerHTML

9、v-text更新元素的textContent

10、v-for 循环指令

　  例如<ul><li v-for = "(item,index ) in list"></li><ul>

11、v-cloak 不需要表达式，保持在元素上知道关联实例结束编译

12、v-once 不需要表达式，只渲染员元素或组件一次，后面如果再调用直接从缓存中获取，提高性能

13、v-pre 不需要表达式，跳过这个元素的编译，加快整个项目的编译速度

　　例如<p v-pre>不需要编译</p>

Vue中内部指令，教你一一使用

原文：https://www.cnblogs.com/songfengyang/p/12484589.html