Vue中的样式绑定、条件渲染和列表渲染
如何将数据和样式进行绑定
Vue是面向数据的编程,不再是直接操作dom
EG: 实现div里的元素点击一次为红色,再点击为原来颜色的交替过程
看到冒号 ’ :’, 要想到这是指令
通过class
1. class的对象绑定
借助 class 和对象的形式来做样式和数据的绑定
activated的显示与否取决于isActivated这个变量是true还是false
2. class和数组绑定
数组里面的内容是一个变量,class会显示这个变量里面的内容
通过Style
1. 对象
让div标签里的样式是styleObj, 这个样式里有color这个内联样式,值是通过styleObj.color来改变
2. 数组
这个div里显示的样式由这个数组内容所决定
如何进行条件渲染
1. v-if
通过v-if指令结合js表达式的返回值,通过true和false来决定标签是否在页面上存在相当于删除dom,再添加dom,性能相对较低
2. v-show [性能会更高一些]
v-show结合js表达式的返回值,通过true和false来决定标签是否在页面上显示
js表达式为flase时页面上也不显示,但内容已经渲染到页面上了,只不过display:none
,因为不会频繁的把一个dom从页面上删除再添加
3. v-if 和 v-else的组合 【要紧贴一起使用】
3. v-if 和 v-else-if 和 v-else 【要紧贴一起使用】
随着show的改变自动更改对应的div
3. key值清空,避免复用
当没有key值时
这个时候使vm的show值为true,虽然改变成了用户名,但因为都是input,Vue在重新渲染页面时,会尽量尝试复用页面上所存在的dom。当切换为用户名时,因为邮箱本身就有input,所以就直接复用了这个dom,内容也没有自动清空
当加了key值时## 如何进行列表渲染
数组循环
- 最基本的列表渲染
- 为列表设置唯一的key值–提高性能
性能如何达到最优?–- key值唯一
- 不使用index来作为key值
(一般都是使用data的list中后端返回的唯一的id)
- 动态让列表数据发生变化
EG:修改第二项的内容为Dell1
-
1. 变异方法 7个小矮人
- push 尾部添加
- pop 尾部删除
- shift 首部删除
- unshift 首部添加
- splice 数组截取
- sort 数组排序
- reverse 数组取反
-
2. 直接改变数组引用
- 模板占位符
帮助包裹一些元素,
对象循环
- 定义
- 修改内容
- 添加内容 –
- 【直接修改其引用】相当于换成一个全新的对象
- 【set方法】
添加了一条数据
- vue实例上的$set 方法
- 【直接修改其引用】相当于换成一个全新的对象