即兴小索奇
即兴小索奇

【Vue】条件渲染&列表渲染来啦

hello，我是小索奇哈，精心制作的Vue系列持续发放，涵盖大量的经验和示例，由浅入深进行讲解。 本章给大家讲解的是条件&列表渲染，前面的章节已经更新完毕，后面的章节持续输出，有任何问题都可以留言或私信哈，一起加油~

条件渲染

1. v-if

这个指令根据表达式的真假来决定是否渲染元素

例如:


  只有在 show = true 时显示

2. v-else-if/v-else

v-else-if表示v-if的“else-if”条件,v-else表示最后的“else”条件

例如:


  A
  B 
  都不是

3. 用key管理可复用元素

让Vue通过key值识别元素,提高渲染效率

例如:


  username
  email

4. v-show

基于CSS显示/隐藏元素,只是切换display

例如:


  在 ok=true 时显示

如果要频繁的更改，使用v-show会更好点，因为它仅是切换隐藏显示，效率更高

v-if 和 v-show 在条件渲染时的选择判断如下

  1. 当需要完全切换显示/隐藏元素时,如用户权限控制,使用 v-if它会直接操作 DOM,完全销毁或重新渲染元素

  2. 当只需要简单切换元素的显示/隐藏,如一些弹窗、提示,使用 v-show它只是切换 CSS 的 display属性,开销更小

  3. 当元素较简单,渲染开销小时,两者差异不大如果元素较复杂,v-show 会略快一些

  4. 如果需要频繁切换,使用 v-show;如果在运行时不大可能改变,使用 v-if

简单总结一下:

template上的v-if

template元素是一个不可见的包装器,它可以容纳多个元素,但是它本身不会渲染到DOM中

常见的应用场景就是和v-if指令结合使用: