vue.js 常用指令攻略

Vue.js的指令是以v-开首的，它们感化于HTML元素，指令供给了一些特别的特征，将指令绑心猿意马在元素上时，指令会为绑心猿意马的方针元素添加一些特别的行为，我们可以将指令看作特别的HTML特征（attribute）。

东西/原料

• vue.js
• 代码编纂器
• 浏览器

方式/步调

1. 1

   v-if指令

   v-if是前提衬着指令，它按照表达式的真假来删除和插入元素，它的根基语法如下：

   v-if="expression"

   expression是一个返回bool值的表达式，表达式可所以一个bool属性，也可所以一个返回bool的运算式。例如：

   
2. 2

   v-show指令

   v-show也是前提衬着指令，和v-if指令分歧的是，利用v-show指令的元素始终会被衬着到HTML，它只是简单地为元素设置CSS的style属性。

   
3. 3

   v-else指令

   可以用v-else指令为v-if或v-show添加一个“else块”。v-else元素必需当即跟在v-if或v-show元素的后面——不然它不克不及被识别。

   
4. 4

   v-for指令

   v-for指令基于一个数组衬着一个列表，它和JavaScript的遍历语法相似：

   v-for="item in items"

   items是一个数组，item是当前被遍历的数组元素。

   
5. 5

   v-bind指令

   v-bind指令可以在其名称后面带一个参数，中心放一个冒号离隔，这个参数凡是是HTML元素的特征（attribute），例如：v-bind:class

   v-bind:argument="expression"

   下面这段代码构建了一个简单的分页条，v-bind指令感化于元素的class特征上。这个指令包含一个表达式，表达式的寄义是：高亮当前页。

   
6. 6

   v-on指令

   v-on指令用于给监听DOM事务，它的用语法和v-bind是近似的，例如监听<a>元素的点击事务：

   <a v-on:click="doSomething">

   有两种形式挪用方式：绑心猿意马一个方式（让事务指标的目的方式的引用），或者利用内联语句。Greet按钮将它的单击事务直接绑心猿意马到greet()方式，而Hi按钮则是挪用say()方式。

   

注重事项

• v-bind和v-on可以别离缩写为 ：和 @