vue数据绑定方式：

Posted 2020-10-12 xzzzys

 

1，{{   }}

2，v-text

3，v-html 　　

　　前两种接受普通变量，第三种绑定带有标签的内容，但是严禁使用，这个会有 XSS危险，（将字符串解析成源代码）

4，v-bind：title=‘msg’　　//绑定属性　　可缩写　　：title=‘msg‘

5，v-on 　　//绑定事件　　可缩写　　@click=‘fun1‘

　　在“data”属性中加个属性

　　“methods":{

　　　　"fun1":function(){

　　　　　　//fun1事件执行代码

　　　　}

　　　}

6，v-show　　//值为真时显示，否则不显示

7，v-if　　//值为真时显示，否则不显示

8，v-else　　//值为真时显示，否则不显示,可以不加条件，表示剩余情况

9，v-else　　//值为真时显示，否则不显示,可以不加条件，表示剩余情况

10，v-for　　//用于遍历循环，1.0版本可以识别$index，$first,$last,$medle，2.0版本不行，可以用v-for=“(u,index) in user”或

　　　　　　　　　　　　　　第三个参数为索引：

<div v-for="(value, key, index) in object"> {{ index }}. {{ key }}: {{ value }} </div>

11，v-model　　//绑定表单元素，用表单时必须要加此指令

12，v-pre　　//忽略由此修饰的代码，就是不解析把它原样显示出来，还可以加快页面加载速度

13，v-cloak　　//和ng-cloak一样，防止{{}}在页面加载时显示出来，等页面加载完成后再显示出来花括号里的内容

14，v-once　　//一次事件绑定　　<div>{{msg}}</div>　　只显示一次，后面数据改变了，此部分也不会在改变了