vue:常用的v-指令

1.v-html:将属性值的html语言识别并渲染出来
例子如下：


使用v-html:


2.v-bind，置于标记的属性前用冒号隔开，控制该属性的值为其原来值对应在vm对象中的数据
例如下例：


而且在浏览器中使用快捷键F12(或Fn+F12)，查看网页源代码会发现属性值已被替换：

“v-bind:“可省略为一个冒号：

3.v-on:给标记属性绑定事件
这里先补充，Vue()函数有第三个参数methods,值为json格式的数据，其中每个元素值为一个函数。

可简写为如下形式：

methods元素值中的函数可以调用Vue()的data中的元素，不过要在元素名前加“this.”。
回到v-on指令，示例如下：

v-on加在input标记的click属性前，当点击按钮事件发生时就会执行click属性值指定的函数，即add()函数。这里，执行完add()函数后data中的数据发生了改变，而data中的数据发生了改变后会被VM调度者监听到，然后自动把最新的数据运用到页面上。
效果如下：

点击一次按钮：

再点击一次按钮：

“v-on”可以简写为”@”.
注意：v-on控制的事件属性值不仅可以是函数名，也可以是JS代码。

4.v-model：实现双向数据绑定（即可以实现当用户在页面输入数据时同步到vm对象中的data中）
如下例：

v-model与weight绑定，即input的value属性值与weight绑定（不写成v-model:value=“weight”），当用户输入数据时，weight的值与文本框中内容一直保持一致，即p标记中的weight值也与文本框中的内容保持一致。


注意：在vue中，只有v-model指令实现了数据的双向绑定，其它指令都是单向的。而且v-model指令只能运用于表单元素（input,text,radio,checkbox textarea,select)中。

5.v-if和v-else-if用于条件判断

运行结果：

6.v-for:常用于表格中循环显示数据