VUE学习- 条件 {v-if、v-else、v-show}

简介

两组均控制元素显隐，
区别在于：
（1）
{v-if v-else-if v-else}需要添加判断语句，
v-show按照变量true/false控制。
（2）
​ v-if 通过对dom元素的创建删除进行控制。
在首次渲染的时候，如果条件为假，什么也不操作，页面当作没有这些元素。当条件为真的时候，开始局部编译，动态的向DOM元素里面添加元素。当条件从真变为假的时候，开始局部编译，卸载这些元素，也就是删除。

​ v-show 则通过样式改变显隐，元素一直存在。
不管条件是真还是假，第一次渲染的时候都会编译出来，也就是标签都会添加到DOM中。之后切换的时候，通过display: none;样式来显示隐藏元素。可以说只是改变css的样式，几乎不会影响什么性能。

v-if v-else-if v-else

v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素

 <div v-if="type === 'A'">
   A
 </div>
 <div v-else-if="type === 'B'">
   B
 </div>
 <div v-else-if="type === 'C'">
   C
 </div>
 <div v-else>
   Not A/B/C
 </div>

v-show

也可以使用 v-show 指令来根据条件展示元素：

<h1 v-show="ok">Hello!</h1>

v-for 与 v-if冲突

由于v-for的优先级比v-if高，所以导致每循环一次就会去v-if一次，而v-if是通过创建和销毁dom元素来控制元素的显示与隐藏，所以就会不停的去创建和销毁元素，造成页面卡顿，性能下降。

解决办法

（1）将 v-if 和 v-for 分别放在不同层级标签中。
ps，有时候分开放也会报错，还可以试试将v-for添加到temple标签内
（2）如果 v-if 和 v-for 只能放在同一级标签中，使用计算属性进行改造。

let title = "自定义"
 <ul v-for="(item, index) in lists(list, title)" :key="index">
   <li>{{item.name}}</li>
 </ul>

computed: {
    lists () {
      return (item, name) => {
        return item.filter(item => item.name !== name)
      }
    }
  }

参考（https://blog.csdn.net/GKISX1216/article/details/124019132）