vue.js 的指令是以 v - 开头的, 它们作用于 html 元素, 指令提供了一些特殊的特性, 将指令绑定在元素上时, 指令会为绑定的目标元素添加一些特殊的行为, 我们可以将指令看作特殊的 HTML 特性(attribute).
vue.JS 常用指令
v-if 指令
v-if 是条件渲染指令, 它根据表达式的真假来删除和插入元素, 它的基本语法如下:
v-if="expression"
expression 是一个返回 bool 值的表达式, 表达式可以是一个 bool 属性, 也可以是一个返回 bool 的运算式.
v-show 指令
v-show 也是条件渲染指令, 和 v-if 指令不同的是, 使用 v-show 指令的元素始终会被渲染到 HTML, 它只是简单地为元素设置 CSS 的 style 属性.
v-else 指令
可以用 v-else 指令为 v-if 或 v-show 添加一个 "else 块".v-else 元素必须立即跟在 v-if 或 v-show 元素的后面 -- 否则它不能被识别.
v-for 指令
v-for 指令基于一个数组渲染一个列表, 它和 JavaScript 的遍历语法相似:
v-for="item in items"
items 是一个数组, item 是当前被遍历的数组元素.
v-bind 指令
v-bind 指令可以在其名称后面带一个参数, 中间放一个冒号隔开, 这个参数通常是 HTML 元素的特性(attribute), 例如: v-bind:class
v-bind:argument="expression"
下面这段代码构建了一个简单的分页条, v-bind 指令作用于元素的 class 特性上. 这个指令包含一个表达式, 表达式的含义是: 高亮当前页.
v-on 指令
v-on 指令用于给监听 DOM 事件, 它的用语法和 v-bind 是类似的, 例如监听 < a > 元素的点击事件:
<a v-on:click="doSomething">
有两种形式调用方法: 绑定一个方法 (让事件指向方法的引用), 或者使用内联语句. Greet 按钮将它的单击事件直接绑定到 greet() 方法, 而 Hi 按钮则是调用 say()方法.
注意事项: v-bind 和 v-on 可以分别缩写为 : 和 @
更多 web 前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/vue-js/17154.html