目录
v-show、v-if区别
v-show 通常仅会进行一次创建操作，之后主要通过 css 来实现对其显示与隐藏状态的控制。当进行切换按钮等相关操作时，v-show 每次并不会重新去执行 DOM 的删除与创建动作，而仅仅是对元素的 display 属性在显示与 none 之间进行切换，不过其在初始渲染阶段确实存在相对较高的资源消耗情况。
v-if 则有所不同，它会不断地进行元素的创建与销毁流程。在切换按钮等操作发生时，v-if 每次都会重新对元素进行相应的删除或创建操作，这使得它在切换性能方面会产生较高的消耗。具体来说，当 v-if 的条件判断为 true 时，会输出当前标签对应的元素；而当 v-else 的条件判断为 false 时，同样也会输出当前标签所对应的元素。
总体来讲：如果元素涉及到特别频繁的切换情景，那么一般来说最好不要采用 v-if ，而是相对更推荐使用 v-show 。而如果元素存在可能永远都不会被显示出来进而被用户所看到的情况，那么此时较为适宜采用 v-if 。需要注意的是，在实际应用中，应根据具体的场景和需求来合理选择使用 v-show 或 v-if ，以达到最佳的性能和用户体验效果。
示例代码如下：
<!-- 在head中引入element.css、vue.js、element.js -->
<link rel="stylesheet" href="./css/element-plus.css"/>
<script src="./js/vue.global.js"></script>
<script src="./js/element-plus.js"></script>
<!-- body部分 -->
<body>
<div id="app">
<el-row>
<el-col :span="24">
<el-divider content-position="left">v-show</el-divider>
<p v-show="flag1">段落</p>
<el-button type="primary" @click="toggle1">单个段落显示隐藏切换</el-button>
<p v-show="flag2">段落a</p>
<p v-show="!flag2">段落b</p>
&