Vue中的样式绑定、条件渲染和列表渲染

如何将数据和样式进行绑定

Vue是面向数据的编程,不再是直接操作dom
EG: 实现div里的元素点击一次为红色,再点击为原来颜色的交替过程
看到冒号 ’ :’, 要想到这是指令

通过class

1. class的对象绑定

借助 class 和对象的形式来做样式和数据的绑定
activated的显示与否取决于isActivated这个变量是true还是false

Vue中的样式绑定、条件渲染和列表渲染_第1张图片

2. class和数组绑定

数组里面的内容是一个变量,class会显示这个变量里面的内容Vue中的样式绑定、条件渲染和列表渲染_第2张图片

通过Style

1. 对象

让div标签里的样式是styleObj, 这个样式里有color这个内联样式,值是通过styleObj.color来改变
Vue中的样式绑定、条件渲染和列表渲染_第3张图片

2. 数组

这个div里显示的样式由这个数组内容所决定Vue中的样式绑定、条件渲染和列表渲染_第4张图片

如何进行条件渲染

1. v-if

通过v-if指令结合js表达式的返回值,通过true和false来决定标签是否在页面上存在相当于删除dom,再添加dom,性能相对较低

2. v-show [性能会更高一些]

v-show结合js表达式的返回值,通过true和false来决定标签是否在页面上显示
js表达式为flase时页面上也不显示,但内容已经渲染到页面上了,只不过display:none,因为不会频繁的把一个dom从页面上删除再添加
Vue中的样式绑定、条件渲染和列表渲染_第5张图片Vue中的样式绑定、条件渲染和列表渲染_第6张图片在这里插入图片描述Vue中的样式绑定、条件渲染和列表渲染_第7张图片Vue中的样式绑定、条件渲染和列表渲染_第8张图片

3. v-if 和 v-else的组合 【要紧贴一起使用】

Vue中的样式绑定、条件渲染和列表渲染_第9张图片
在这里插入图片描述Vue中的样式绑定、条件渲染和列表渲染_第10张图片

3. v-if 和 v-else-if 和 v-else 【要紧贴一起使用】Vue中的样式绑定、条件渲染和列表渲染_第11张图片

随着show的改变自动更改对应的div
Vue中的样式绑定、条件渲染和列表渲染_第12张图片

3. key值清空,避免复用

当没有key值时

Vue中的样式绑定、条件渲染和列表渲染_第13张图片
在这里插入图片描述
这个时候使vm的show值为true,虽然改变成了用户名,但因为都是input,Vue在重新渲染页面时,会尽量尝试复用页面上所存在的dom。当切换为用户名时,因为邮箱本身就有input,所以就直接复用了这个dom,内容也没有自动清空
Vue中的样式绑定、条件渲染和列表渲染_第14张图片

当加了key值时Vue中的样式绑定、条件渲染和列表渲染_第15张图片Vue中的样式绑定、条件渲染和列表渲染_第16张图片## 如何进行列表渲染

数组循环

  1. 最基本的列表渲染
    Vue中的样式绑定、条件渲染和列表渲染_第17张图片
  2. 为列表设置唯一的key值–提高性能
    性能如何达到最优?–
    • key值唯一
    • 不使用index来作为key值
      (一般都是使用data的list中后端返回的唯一的id)
      Vue中的样式绑定、条件渲染和列表渲染_第18张图片
  3. 动态让列表数据发生变化
    EG:修改第二项的内容为Dell1
  • 1. 变异方法 7个小矮人
    • push 尾部添加
    • pop 尾部删除
    • shift 首部删除
    • unshift 首部添加
    • splice 数组截取
    • sort 数组排序
    • reverse 数组取反
      在这里插入图片描述
  • 2. 直接改变数组引用

Vue中的样式绑定、条件渲染和列表渲染_第19张图片Vue中的样式绑定、条件渲染和列表渲染_第20张图片

  • 3. set方法
      1. Vue 的set 方法 Vue中的样式绑定、条件渲染和列表渲染_第21张图片
      1. 实例的set 方法Vue中的样式绑定、条件渲染和列表渲染_第22张图片
  1. 模板占位符
    帮助包裹一些元素,Vue中的样式绑定、条件渲染和列表渲染_第23张图片

对象循环

  1. 定义
    Vue中的样式绑定、条件渲染和列表渲染_第24张图片
    Vue中的样式绑定、条件渲染和列表渲染_第25张图片
  2. 修改内容在这里插入图片描述
  3. 添加内容 –Vue中的样式绑定、条件渲染和列表渲染_第26张图片
    • 【直接修改其引用】相当于换成一个全新的对象
      Vue中的样式绑定、条件渲染和列表渲染_第27张图片
    • 【set方法】
      添加了一条数据
      在这里插入图片描述Vue中的样式绑定、条件渲染和列表渲染_第28张图片
    • vue实例上的$set 方法
      +

你可能感兴趣的:(前端学习,Vue)