一文讲透 Vue 中 `v-if` 和 `v-show` 的区别
warning:
这篇文章距离上次修改已过200天，其中的内容可能已经有所变动。
v-if 和 v-show 是 Vue.js 中用于条件渲染的两个指令。
- v-if：条件渲染，如果条件为假，则什么也不渲染。
<div v-if="condition">
<!-- 当 condition 为 true 时，这部分内容会被渲染 -->
</div>- v-show：条件渲染，但元素总是被渲染，并保持在DOM中，只是使用CSS的
display属性来开关。
<div v-show="condition">
<!-- 这部分内容总是被渲染，但当 condition 为 false 时会被隐藏 -->
</div>主要区别：
v-if是惰性的，如果初始条件为假，则什么也不做，只有当条件为真时才开始渲染。v-show不同，元素总是被渲染，并保持在DOM中，只是使用CSS切换显示状态。v-if有更高的切换消耗，而v-show有更高的初始渲染消耗。
使用场景：
- 如果需要频繁切换，则使用
v-show更好。 - 如果运行时条件不大可能改变，则使用
v-if更好。 - 如果需要在不同条件下切换元素的显示，并希望避免渲染那些不会显示的元素，则使用
v-if更好。
评论已关闭