Vue 是一款前端框架，它提供很多种指令来帮助我们构建动态页面。其中，v-show 和 v-if 是两个经常被用来控制元素的指令。它们看似功能相似，但其实它们的使用场景是不同的。
v-show
v-show 是一种控制元素显示与否的指令。如果条件为 true，元素会被显示；否则，元素会被隐藏。可以使用 v-show 来切换元素的可见性，而不用引起重新渲染。
v-show 的语法如下：
<div v-show="condition"></div>
其中，condition 是一个 JavaScript 表达式，它的值决定了元素的可见性。
v-show 的优点在于，它不会影响元素的生命周期。即使元素被隐藏了，它仍然存在于 DOM 树中。而且，由于它不会引起重新渲染，所以对性能的影响比 v-if 要小。
v-show 的使用场景主要是控制元素的显示与否，比如控制一个子菜单的展开与关闭：
// javascriptcn.com 代码示例 <button @click="showSubMenu = !showSubMenu"> 点击我展开子菜单 </button> <ul v-show="showSubMenu"> <li>子菜单选项 1</li> <li>子菜单选项 2</li> <li>子菜单选项 3</li> </ul>
v-if
v-if 是一种条件性地渲染元素的指令。如果条件为 true，元素会被渲染到 DOM 树上；否则，元素不会被渲染。
v-if 的语法如下：
<div v-if="condition"></div>
v-if 的优点在于，它不会将未渲染的元素加入 DOM 树。这在一些元素很复杂或者数量很多的情况下，可以提高页面的性能。而且，由于它是基于条件的，所以更加灵活，可以根据不同的情况来控制元素的渲染。
v-if 的使用场景主要是根据条件来决定是否渲染某个元素。比如，当用户登录之后，显示一个欢迎消息：
// javascriptcn.com 代码示例
<template v-if="isLoggedIn">
<p>欢迎，{{ username }}！</p>
<button @click="logout">退出登录</button>
</template>
<template v-else>
<p>请先登录</p>
<button @click="showLoginModal">登录</button>
</template>总结
v-show 和 v-if 是两种不同的指令，它们的使用场景是不同的。一般情况下，如果控制元素的显示与否，就应该使用 v-show；如果根据条件来决定是否渲染元素，就应该使用 v-if。在实际开发中，也可以根据具体的情况来选择哪种指令更适合。
示例代码
// javascriptcn.com 代码示例
<template>
<div>
<button @click="showDiv = !showDiv">
切换 v-show 的显示与隐藏
</button>
<button @click="toggleIf">
切换 v-if 的渲染与否
</button>
<hr>
<div v-show="showDiv">
<p>这是一个使用 v-show 控制显示与否的元素</p>
</div>
<div v-if="ifFlag">
<p>这是一个使用 v-if 控制渲染与否的元素</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
showDiv: true,
ifFlag: true,
};
},
methods: {
toggleIf() {
this.ifFlag = !this.ifFlag;
},
},
};
</script>
<style scoped>
</style>来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653719717d4982a6ebf6f5ac