v-if 和 v-show 用于控制元素显示或隐藏。
当 v-if 的条件为 false 时，元素会从页面中删除。当条件为 true 时，元素正常显示。
当 v-show 的条件为 false 时，会添加一个行内样式 display:none 将元素隐藏。当条件为 true 时，元素正常显示。
注意：使用 v-if 时，元素可能无法获取到。而使用 v-show 时，元素一定可以获取到。
条件渲染 v-show
当 v-show 的条件为 true 时，元素正常显示。
<div id="APP"> <p v-show="true">条件渲染</p> </div>
当 v-show 的条件为 false 时，会添加一个行内样式 display:none 将该元素隐藏。
<div id="APP"> <p v-show="false">条件渲染</p> </div>
当 v-show 的值为表达式时，会先将计算结果转换为 true 或 false，再进行显示或隐藏
<div id="APP"> <p v-show="1 == 5">条件渲染</p> </div>
可以在 data 中创建变量，通过动态改变 v-show 的值，使该元素显示或隐藏。
<div id="APP"> <button @click="toggleShow">切换显示状态</button> <p v-show="status">条件渲染</p> </div>
const vm = new Vue({ el: "#APP", data(){ return { status:true } }, methods:{ toggleShow(){ this.status = !this.status; } } });
注：v-show 适用于切换频率较高的场景，因为 v-show 只是给元素添加样式实现显示隐藏的，并未删除这个元素。
条件渲染 v-if：
当 v-if 的条件为 true 时，元素正常显示。
<div id="APP"> <p v-if="true">条件渲染</p> </div>
当 v-if 的条件为 false 时，会将该元素在 DOM 中删除。
<div id="APP"> <p v-if="false">条件渲染</p> </div>
当 v-if 的值为表达式时，也会先将计算结果转换为 true 或 false，再判断是否删除该元素。
<div id="APP"> <p v-if="1 === 2">条件渲染</p> </div>
也可以在 data 中创建变量，通过动态改变 v-if 的值，使该元素创建或删除。
<div id="APP"> <button @click="toggleIf">切换显示状态</button> <p v-if="status">条件渲染</p> </div>
const vm = new Vue({ el: "#APP", data(){ return { status:true } }, methods:{ toggleIf(){ this.status = !this.status; } } });
注：v-if 适用于切换频率较低的场景，因为 v-if 是通过删除元素或重新创建元素实现显示隐藏的，v-if 相比 v-show 的开销更大。
条件渲染 v-else 和 v-else-if：
<div id="APP"> <h2>当前num的值是：{{num}}</h2> <button @click="add">点击num+1</button> <p v-if="num == 1">张三</p> <p v-else-if="num == 2">李四</p> <p v-else-if="num == 3">王五</p> <p v-else>你谁呀？</p> </div>
注：v-else 和 v-else-if 必须紧跟在 v-if 的后边，标签必须紧挨着不能被打断，如果被打断后边的 v-else 或 v-else-if 将不会生效。
const vm = new Vue({ el: "#APP", data(){ return { num:0 } }, methods:{ add(){ this.num++; } } });
注：使用 v-else-if 的优点就是，当 v-if 或 v-else-if 条件成立时，后边的 v-else-if 和 v-else 将不再执行，提高页面渲染效率。
注：使用 v-else 的优点就是，当 v-if 和 v-else-if 的条件都不成立时，就会执行 v-else 渲染一个默认值。另外 v-else 不需要写执行条件。
在 template 模板上使用 v-if：
如果想同时切换多个元素的显示状态，可以使用 template 标签将这些元素包裹在一起，然后在 template 标签上使用 v-if 切换显示状态。
<div id="APP"> <button @click="toggleIf">切换显示状态</button> <template v-if="status"> <p>北京</p> <p>上海</p> <p>深圳</p> </template> </div>
const vm = new Vue({ el: "#APP", data(){ return { status:true } }, methods:{ toggleIf(){ this.status = !this.status; } } });
注：template 标签不会在页面中显示，更不会破坏页面结构。但是 template 标签只能配合 v-if 使用，不能使用 v-show .
原创作者：吴小糖
创作时间：2023.3.2
