模板渲染
![](https://img.haomeiwen.com/i5540636/2e19d958312cac37.png)
vue2.0种,必须使用
v-bind
将变量渲染到属性中,
![](https://img.haomeiwen.com/i5540636/31537af3760ab0c0.png)
![](https://img.haomeiwen.com/i5540636/8e8bcdd8a61a89d1.png)
列表渲染
v-for
![](https://img.haomeiwen.com/i5540636/9c9dc545052bf924.png)
也可以使用
v-text
方法
![](https://img.haomeiwen.com/i5540636/3913ccb0861793b3.png)
加序号index,2.0需要先声明index,例如:为奇数项添加odd类
![](https://img.haomeiwen.com/i5540636/9f7344a13f18dfaa.png)
V-for
进行对象渲染
![](https://img.haomeiwen.com/i5540636/714fff66e71c4739.png)
![](https://img.haomeiwen.com/i5540636/fe535fb9d42d4191.png)
引入组件:import后再注册 ,最后以标签的形式使用
![](https://img.haomeiwen.com/i5540636/dfc2ba1b33957040.png)
es6的简写,
![](https://img.haomeiwen.com/i5540636/6cdee5d1d9d776d6.png)
等同于
![](https://img.haomeiwen.com/i5540636/425f538dffd148e9.png)
之前的版本
![](https://img.haomeiwen.com/i5540636/17e2adfe38de054d.png)
v-for
渲染组件,意义:动态为组件传值(比如key)
![](https://img.haomeiwen.com/i5540636/12bbc6bb0bf0fefe.png)
定义一个方法,实现列表的更新
![](https://img.haomeiwen.com/i5540636/b1ff5a10f51a5ac9.png)
![](https://img.haomeiwen.com/i5540636/58cad044a8e3f5a6.png)
以下方法会触发列表的更新
![](https://img.haomeiwen.com/i5540636/087fb86b97e34d13.png)
改变数组的长度,直接为数组中的某一项赋值,不会触发列表的更新
![](https://img.haomeiwen.com/i5540636/1bfba802b0ec028d.png)
将数组第二项改为pinnaple,点击按钮,仍然不更新
![](https://img.haomeiwen.com/i5540636/2db279549a9a38c0.png)
需要使用vue提供的全局set方法
首先要导入Vue
![](https://img.haomeiwen.com/i5540636/824995955bdc9dfd.png)
![](https://img.haomeiwen.com/i5540636/6a4dea49234e75d8.png)
总结
![](https://img.haomeiwen.com/i5540636/514949950b72beea.png)
v-bind
动态绑定,同步更新,比如link,class属性的绑定
![](https://img.haomeiwen.com/i5540636/db76b35676cfa3d0.png)
当class是一个对象时,值为true的class会展现出来
![](https://img.haomeiwen.com/i5540636/7950b8c99d72f399.png)
![](https://img.haomeiwen.com/i5540636/6604e83b5dbc3c45.png)
当class是数组时,
![](https://img.haomeiwen.com/i5540636/6a19c992c5409d90.png)
也可以直接输入
![](https://img.haomeiwen.com/i5540636/15319c60af15856c.png)
![](https://img.haomeiwen.com/i5540636/9efa83141d7eaa4e.png)
混用,数组和对象
![](https://img.haomeiwen.com/i5540636/293cdcc1d92bbc10.png)
![](https://img.haomeiwen.com/i5540636/1547798a91374936.png)
绑定style
![](https://img.haomeiwen.com/i5540636/b292ffab02429069.png)
![](https://img.haomeiwen.com/i5540636/766548875bec8906.png)
条件渲染
v-if
,v-show
![](https://img.haomeiwen.com/i5540636/621ef50ffbb3b903.png)
![](https://img.haomeiwen.com/i5540636/6ce7ed5f8cc24923.png)
按钮取反
![](https://img.haomeiwen.com/i5540636/8fbd6f5f126c329b.png)
区别:
v-show
使用的是display:none;
v-if`是从DOM中被删除
![](https://img.haomeiwen.com/i5540636/e98c91cee21646e1.png)
v-else配合v-if使用
![](https://img.haomeiwen.com/i5540636/6711ebe63f42a0c5.png)
总结
![](https://img.haomeiwen.com/i5540636/08324598b72c50e1.png)
网友评论