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 的使用场景主要是控制元素的显示与否，比如控制一个子菜单的展开与关闭：
-- -------------------- ---- ------- ------- ------------------- - -------------- -------- --------- --- --------------------- --------- ------ --------- ------ --------- ------ -----
v-if
v-if 是一种条件性地渲染元素的指令。如果条件为 true，元素会被渲染到 DOM 树上；否则，元素不会被渲染。
v-if 的语法如下：
<div v-if="condition"></div>
v-if 的优点在于，它不会将未渲染的元素加入 DOM 树。这在一些元素很复杂或者数量很多的情况下，可以提高页面的性能。而且，由于它是基于条件的，所以更加灵活，可以根据不同的情况来控制元素的渲染。
v-if 的使用场景主要是根据条件来决定是否渲染某个元素。比如，当用户登录之后，显示一个欢迎消息：
-- -------------------- ---- ------- --------- ------------------ -------- -------- ------- ------- ----------------------------- ----------- --------- ------- ----------- ------- ----------------------------------- -----------
总结
v-show 和 v-if 是两种不同的指令，它们的使用场景是不同的。一般情况下，如果控制元素的显示与否，就应该使用 v-show；如果根据条件来决定是否渲染元素，就应该使用 v-if。在实际开发中，也可以根据具体的情况来选择哪种指令更适合。
示例代码
-- -------------------- ---- -------
----------
-----
------- --------------- - ----------
-- ------ ------
---------
------- ------------------
-- ---- -----
---------
----
---- -----------------
--------- ------ -------------
------
---- --------------
--------- ---- -------------
------
------
-----------
--------
------ ------- -
------ -
------ -
-------- -----
------- -----
--
--
-------- -
---------- -
----------- - -------------
--
--
--
---------
------ -------
--------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653719717d4982a6ebf6f5ac