锐客网

  1. 首页 > it技术 > >

11.VUE中的条件渲染及列表渲染

v-if指令：控制一个模板标签是否在页面上显示 v-if后面跟着一个js表达式 这个表达式的返回值决定了div标签是否真实的挂载到页面上 通过v-if指令结合js表达式决定一个DOM元素是否在页面上展示【v-if指令变量值为false时 该元素不存在于DOM之上】
v-show指令：控制一个模板标签是否在页面上显示 【v-show指令对应的js表达式为false时 该标签对应的DOM在页面上依然存在 只不过以style="display: none; "的形式挂载在页面上】
在经常需要隐藏/显示一个DOM元素时：使用v-show指令性能更高 因为不会频繁得将DOM从页面上删除再添加 v-if指令每次隐藏显示都要删除DOM再添加DOM 性能更低一些
v-else指令：v-if指令和v-else指令要紧贴着使用

VUE中的条件渲染 - 锐客网{{message}} bye world {{message}} this is A this is B this is others

11.VUE中的条件渲染及列表渲染
文章图片

key值：v-if切换的时候 input中的内容并没有清空 这是因为VUE在重新渲染页面的时候会尽量的尝试复用页面上已经存在的DOM元素 【用户名和邮箱名复用了同一个input 复用的同时内容没有清空】所以采用key值的形式 当给某个元素标签添加key值的时候VUE会知道 该元素是页面上唯一的元素 如果两个key不一样 VUE就不会尝试复用该input标签【VUE虚拟DOM diff算法中用到的内容】
VUE的key值 - 锐客网用户名：邮箱名：

数组循环：v-for="(item,index) of list" :key="item.id"
  • 第一个参数：列表中的每一项的内容
  • 第二个参数：每一项在页面中的索引下标
  • 为了提升循环显示的性能 会给每个循环项添加唯一的key值 不推荐使用index作为key值：因为使用index作为key值 在频繁操作DOM元素相对应的数据时费性能【可能会让VUE 没办法充分复用DOM节点】
VUE的列表渲染 - 锐客网{{item.text}}---{{index}}

11.VUE中的条件渲染及列表渲染
文章图片

tips：当尝试修改数组中的内容时 不能直接通过下标的形式改变数组 只能通过几个VUE提供的数组变异方法操作数组 才能实现数据发生变化页面也发生变化这种效果
  • 数组变异方法：pop push shift unshift splice sort reverse
11.VUE中的条件渲染及列表渲染
文章图片

【11.VUE中的条件渲染及列表渲染】实现数据发生变化页面也发生变化方案二：改变引用地址【数组在js中是引用类型 】让其指向另外一个地址空间
11.VUE中的条件渲染及列表渲染
文章图片

template占位符：模板占位符 可以用于包裹一些元素 但在循环的过程中不会被真的渲染在页面上
VUE的列表渲染 - 锐客网

11.VUE中的条件渲染及列表渲染
文章图片

对象循环：v-for="(item,key,index) of userInfo"
  • 第一个参数：对象中的每一项的内容
  • 第二个参数：对象的键名
  • 第三个参数：每一项在页面中的索引下标
VUE的列表渲染 - 锐客网{{item}}---{{key}}--{{index}}

11.VUE中的条件渲染及列表渲染
文章图片

遍历对象得时候直接向对象中动态加值：无效
通过改变引用地址实现数据发生变化页面也发生变化：
11.VUE中的条件渲染及列表渲染
文章图片


    推荐阅读


    上一篇：es6|es6 set 常见实用用法

    下一篇：cesium切换图层及初始时定位至中国