学习不是生活的全部，但无学习则生活缺少了许多
学过vue的小伙伴或多或少都用过v-if或者v-show，也都知道是控制元素显示与隐藏的指令，它们的区别主要在于渲染方式不同，但是有一些小伙伴就没有在意过这两个到底有什么区别，今天这篇文章主要就是讲述v-if与v-show他们俩的异曲同工之妙
话不多说先上代码
先看v-show<template>
<div>
<div v-show="isShow_true">我又出来了</div>
<div v-show="isShow_false">我又进去了</div>
</div>
</template>
<script>
export default {
data() {
return {
isShow_true: true,
isShow_false: false,
};
},
};
</script>
这便是一个简单的两行文字显示隐藏
页面最终展示出来的效果就是如下：再看v-if
<template>
<div>
<div v-if="isIf_true">我又跳进来了</div>
<div v-if="isIf_false">我又跳出去了</div>
</div>
</template>
<script>
export default {
data() {
return {
isIf_true: true,
isIf_false: false,
};
},
};
</script>
这个时候就会有长得帅的小伙伴问了：这不是一样的效果吗，有啥区别呢？
问得好啊，那就话不多说，直接看结果：
先看v-show
再看v-if
这个时候就有细心的小伙伴发现区别了，其实v-show只是把值为false的DOM元素的display的值更改为none，以此来让页面元素隐藏，但是v-if直接把值为false的DOM元素没有渲染
由此可得：
v-if通过条件判断来决定是否渲染DOM结构。当v-if的表达式为false时，对应的DOM元素就不会被渲染到页面上，当表达式变为true时才会被渲染出来。
v-show则是通过CSS属性display的值来控制元素是否显示。当v-show的表达式为false时，对应的DOM元素依然会在页面上存在，只是将其display属性设置为none；当表达式变为true时，display属性则会被设置为原先的值，元素也会显示出来
各自的优点
v-show：可以快速地切换元素的显示状态，但相比之下会增加一些不必要的DOM操作
v-if：可以减少不必要的DOM操作，从而提高性能，但在频繁切换、有大量嵌套的情况下可能会影响渲染速度
总结：在使用时需要根据具体情况进行选择，如果需要频繁切换元素的显示状态时，可以使用v-show；如果需要减少 DOM 操作时，可以使用v-if
