hello，我是小索奇哈，精心制作的Vue系列持续发放，涵盖大量的经验和示例，由浅入深进行讲解。 本章给大家讲解的是条件&列表渲染，前面的章节已经更新完毕，后面的章节持续输出，有任何问题都可以留言或私信哈，一起加油~
条件渲染
1. v-if
这个指令根据表达式的真假来决定是否渲染元素
例如:
<div v-if="show"> 只有在 show = true 时显示 </div>
2. v-else-if/v-else
v-else-if表示v-if的“else-if”条件,v-else表示最后的“else”条件
例如:
<div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else> 都不是 </div>
3. 用key管理可复用元素
让Vue通过key值识别元素,提高渲染效率
例如:
<div v-if="loginType === 'username'" key="username"> username </div> <div v-else key="email"> email </div>
4. v-show
基于CSS显示/隐藏元素,只是切换display
例如:
<div v-show="ok"> 在 ok=true 时显示 </div>
如果要频繁的更改，使用v-show会更好点，因为它仅是切换隐藏显示，效率更高
v-if 和 v-show 在条件渲染时的选择判断如下
- 当需要完全切换显示/隐藏元素时,如用户权限控制,使用 v-if它会直接操作 DOM,完全销毁或重新渲染元素
- 当只需要简单切换元素的显示/隐藏,如一些弹窗、提示,使用 v-show它只是切换 CSS 的 display属性,开销更小
- 当元素较简单,渲染开销小时,两者差异不大如果元素较复杂,v-show 会略快一些
- 如果需要频繁切换,使用 v-show;如果在运行时不大可能改变,使用 v-if
简单总结一下:
- 完全展示/隐藏用 v-if
- 简单切换显示/隐藏用 v-show
- 频繁切换用 v-show
- 运行时不变用 v-if
template上的v-if
template元素是一个不可见的包装器,它可以容纳多个元素,但是它本身不会渲染到DOM中
常见的应用场景就是和v-if指令结合使用:
- 把v-if加在
<template>上,可以有条件地渲染<template>内部的多个元素 - 而不需要像v-if直接加在单个元素上那样,重复写很多重复的v-if条件判断
<template>可以包含任意类型的元素,非常方便地组织元素块- 最终渲染结果不包含
<template>元素,只包含其内部的元素
用户信息展示案例
<template v-if="user.loggedIn"> <div> <!-- 用户信息 --> <p>用户名:{{user.name}}</p> <p>积分:{{user.points}}</p> </div> <div> <!-- 用户菜单 --> <button>首页</button> <button>设置</button> </div> </template> <div v-else> <!-- 登录提示 --> <p>请登录后查看个人信息</p> <button>去登录</button> </div>
注意template只能和v-if使用，用v-show是不行的
列表渲染
v-for
用于基于数据多次渲染元素,通常用来渲染列表数据
<ul> <li v-for="item in list"> {{ item }} </li> </ul>
模板 v-for
和v-if一样,可以在<template>上使用v-for来渲染元素块
<template v-for="item in list"> <div>{{item.name}}</div> <div>{{item.desc}}</div> </template>
track-by
用来指定元素的唯一标识,提高渲染效率
<div v-for="item in list" :key="item.id"></div>
这里详解一下key
在Vue列表渲染时,就像一个todolist应用生成一长串的li元素当列表数据更新时,Vue需要知道具体哪个元素发生了变化,比如插入、删除、排序等
那么Vue如何识别每个元素的身份呢?这就是key的作用了
我们需要给每个元素添加一个独一无二的key值,来标识不同的元素:
<ul> <li v-for="item in list" :key="item.id"> {{item.name}} </li> </ul>
这里我们使用每个数据item的id作为keykey的要求是唯一的,比如item的id就很适合作为key
有了key,Vue就可以准确地知道哪个元素发生了变化,比如某个元素被删除了,Vue会找到对应key的元素并销毁
这样就实现了高效的列表渲染
所以简单来说,key的作用是作为元素的唯一标识,用于提高Vue列表渲染时的性能,底层会复用DOM节点需要注意key必须唯一,不要使用索引index作为key
注意
一定要写key！虽然说不写key也不报错，但不写可能导致以下内容
- 列表重新渲染时,会直接创建新元素,而不是移动原有元素这会带来页面闪烁
- 使用Transition过渡动画时,会无法正确获取元素状态
- 丧失Vue内部对列表元素的身份识别能力,导致其他问题
这里仅列出以下几点，在react中不写key直接就会报错
当我们不写key的话，vue会自动把index索引作为key（下面介绍index）
- 直接通过索引修改数组,如 vm.items[0] = {},是非响应式的。应使用 Vue.set(vm.items, 0, {}) 或 vm.items.splice() 来修改数组。
