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值时## 如何进行列表渲染

数组循环

1. 最基本的列表渲染
   
2. 为列表设置唯一的key值–提高性能
   性能如何达到最优？–
   • key值唯一
   • 不使用index来作为key值
     （一般都是使用data的list中后端返回的唯一的id）
     
3. 动态让列表数据发生变化
   EG：修改第二项的内容为Dell1

• 1. 变异方法 7个小矮人

  • push 尾部添加
  • pop 尾部删除
  • shift 首部删除
  • unshift 首部添加
  • splice 数组截取
  • sort 数组排序
  • reverse 数组取反
    

• 2. 直接改变数组引用

• 3. set方法

  • 1. Vue 的set 方法
  • 2. 实例的set 方法

4. 模板占位符
   帮助包裹一些元素，

对象循环

1. 定义
   
   
2. 修改内容
3. 添加内容 –
   • 【直接修改其引用】相当于换成一个全新的对象
     
   • 【set方法】
     添加了一条数据
     
   • vue实例上的$set 方法