Vue的十个常用指令

Posted 2020-10-09

1.v-text：用于更新标签包含的文本，作用和{{}}的效果一样。

2.v-html：绑定一些包含html代码的数据在视图上。

3.v-show：用来控制元素的display属性，和显示隐藏有关。v-show指令的取值为true/false，当值为true时直接渲染，当值为false时渲染出来之后带有display:none属性。

4.v-if：控制元素是否被渲染出来。v-if指令的取值为true/false，当值为true时直接渲染，当值为false时直接不渲染。和v-show的区别为：如果需要频繁的切换显示/隐藏的，就用

　　v-show，如果运行后不太可能切换显示/隐藏的，就用v-if。

5.v-else：没有对应的值，但是要求前一个兄弟节点必须要使用v-if指令。v-if和v-else只有一个被渲染出来。

6.v-for：实现列表的渲染，可以用于data中存放的是array形式的数据之类。v-for除了可以迭代数组，还可以迭代对象和整数。

7.v-bind：用于动态绑定DOM元素的属性，常见的用法有：<a>标签里边的href属性，<img/>标签的src属性等。

8.v-on：相当于绑定事件的监听器，绑定的事件触发了，可以指定事件的处理函数。例如click事件等。

9.v-model：实现表单控件和数据的双向绑定，是最重要最常用的指令，一般用在表单输入。

10.v-once：特点是只渲染一次，后面元素中的数据再更新变化，都不会重新渲染。