Vue v-show 指令
v-show 与 v-if
v-show 和 v-if 之间的区别在于 v-if 根据条件创建（渲染）元素，但 v-show 元素已经创建，仅 v-show 改变其可见性。
因此，切换对象的可见性时最好使用 v-show，因为浏览器更容易做到，并且可以带来更快的响应和更好的用户体验。
使用 v-if 而不是 v-show 的原因是 v-if 可以与 v-else-if 和 v-else 一起使用。
在下面的示例中，v-show 和 v-if 分别用于两个不同的 <div> 元素，但基于相同的 Vue 属性。 您可以打开示例并检查代码，发现 v-show 保留了 <div> 元素，并且仅将 CSS 显示属性设置为"none"，但 v-if 实际上破坏了 <div> 元素。
示例
仅当 showDiv 属性设置为"true"时才显示两个 <div> 元素。 如果 showDiv 属性设置为"false"，并且我们使用浏览器检查示例页面，我们可以看到带有 v-if 的 <div> 元素被破坏，但带有 v-show 的 <div> 元素只是将 CSS 显示属性设置为"none"。
<div id="app">
<div v-show="showDiv">Div tag with v-show</div>
<div v-if="showDiv">Div tag with v-if</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
showDiv: true
}
}
})
app.mount('#app')
</script>
亲自试一试 »
