在 Vue.js 中，if-else 和 v-show 指令都可以用来控制组件或元素的显示与隐藏，但它们的实现方式和适用场景有所不同。
区别
if-else 指令 ：在组件或元素中，可以使用 v-if 和 v-else 来实现条件渲染。即根据表达式的真假值来确定是否显示或隐藏元素。
v-show 指令 ：与 if-else 不同， v-show 不是控制元素的显隐，而是通过改变元素的 display 属性来控制是否显示元素。
因此，if-else 更适用于条件不稳定且较为复杂的组件或元素的渲染；而 v-show 适用于需要频繁切换的组件或元素渲染，比如菜单、折叠面板等。
运用技巧
if-else 指令
可以多个 v-if 条件同时存在，但会造成组件内部的 DOM 过多，影响性能。
如果仅需要判断当前是否存在数据，可以使用 v-if 和 v-else 之类的指令；如果需要判断一系列条件，建议使用 computed 属性，避免性能问题。
if-else 指令也可以嵌套使用，可以灵活控制组件与元素的嵌套关系。
v-if 指令支持设置动画效果，可以通过 transition 标签实现。
-- -------------------- ---- -------
----------
-----
----------- ------------
---- -------------- ------- --------
-------------
------
-----------
-------
------------------- ------------------ -
----------- ------- ----
-
------------ -------------- -
-------- --
-
--------v-show 指令
v-show 是通过控制元素的 display 属性来控制元素显隐的，因此在渲染较多的元素时，比 v-if 的性能更高。
v-show 的显示效果简单，一般不需要设置过多的样式。
在需要切换大量元素显隐时，建议使用 v-show，可以避免频繁的 DOM 操作。
示例代码
if-else 指令
-- -------------------- ---- -------
----------
-----
---- ----------------- -------- --------
---- --------- -------- --------
------
-----------
--------
------ ------- -
---- -- -
------ -
-------- -----
--------- ---- --- ------ ----
--------- ------- --- ---
-
-
-
---------v-show 指令
-- -------------------- ---- -------
----------
-----
------- ------------ - ----------------------
----
---- ---------------------------
------
-----------
--------
------ ------- -
---- -- -
------ -
----- ----
-
-
-
---------
-------
--- -
----------------- -----
-------- -----
-
--------总结
在 Vue.js 中，if-else 指令和 v-show 指令都可以用来进行组件与元素的条件渲染，但应根据场景选择使用。if-else 指令适用于条件复杂、频率较低的渲染，而 v-show 指令适用于频繁切换的渲染场景。同时，应注意在使用过程中维护代码的可读性和可维护性，避免过于复杂的嵌套和操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6491145d48841e9894f1887e