Vue条件渲染v-if v-show原理

条件渲染:
1.v-if
写法:
        (1).v-if="表达式"
        (2).v-else-if="表达式"
        (3).v-else="表达式”
适用于:切换频书较低的场景。
特点:不展示的DOM元素直接被移除。
注意: v-if可以和:v-else-if、v-else起使用， 但要求结构不能被“打断”（几个使用的标签之间必须紧挨着）。
2. V- show
写法: v-show=" 表达式”
适用于:切换频率较高的场景。
特点:不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
3.备注:使用v-if的时，元素可能无法获取到（因为被移除了），而使用v-show 定可以获取到。

4.原理：

v-if 指令的实现是基于数据驱动的理念的，当 v-if 指令对应的 value 为 false 的时候会预先创建一个注释节点在该位置，然后在 value 发生变化时，命中派发更新的逻辑，对新旧组件树进行 patch，从而完成使用 v-if 指令元素的动态显示隐藏。

v-show改变该元素的 CSS 属性 display 的值来动态的控制 v-show 绑定的元素的显示或隐藏。所以，当 v-show 对应的 value 为 true 的时候，元素显示与否是取决于它本身的 CSS display 属性。