小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
1. v-show 指令
v-show 指令也可以用来根据一个条件决定是否显示元素或组件，它的用法和 v-if 大致一样：
<template id="my-app">
<h2 v-show="isShow">{{ message }}</h2>
<button @click="toggle">切换</button>
</template>
<body> 中的完整代码：
<div id="app"></div>
<template id="my-app">
<h2 v-show="isShow">{{ message }}</h2>
<button @click="toggle">切换</button>
</template>
<script src="./js/vue.js"></script>
<script>
const App = {
data() {
return {
message: '你好啊',
isShow: true
}
},
methods: {
toggle() {
this.isShow = !this.isShow;
}
},
template: '#my-app'
};
Vue.createApp(App).mount('#app');
</script>
2. v-if 和 v-show 对比
我们已经知道，v-if 和 v-show 都能根据条件的真假来决定是否渲染某一块的内容，那么它们有什么区别呢？
- 首先，在用法上有区别：
v-show不支持<template>元素，在<template>元素上使用v-show不会报错但是无效的；v-show也不支持v-else（如果在非<template>元素上使用v-show，再在v-show后面使用v-else，即使v-show指令的表达式返回truthy值，v-else所在的元素还是会被渲染）；
- 其次，在本质上有区别：
v-show所在的元素无论是否显示到了浏览器页面上，它始终（不管初始条件是什么）是会被渲染并保留在DOM中的。只不过是通过CSS的display属性来进行切换（v-show指令的表达式返回falsy值时，其对应元素上会添加上style="display: none;"）；- 而对于
v-if，当条件为假时，它所在的元素根本就不会被渲染到DOM中，只有当表达式返回truthy值时，才会对所在的元素进行渲染。v-if是“真正”的条件渲染，它会确保在切换过程中，条件块中的内容被销毁和重建。
所以，一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
那么开发中，我们在这两者之间该如何选择呢？
- 如果元素需要在显示和隐藏之间频繁地切换，那么使用
v-show； - 如果不会频繁地发生切换，那么使用
v-if。
