详细解释虚拟仪器中虚拟中频和虚拟显示的区别

v-if和v-show的区别是前端面试中经常被问到的基础知识。顾名思义，v-if和v-show用来判断视图层的显示效果。那么，具体怎么表现呢？v-if和v-show有什么区别？

首先我们可以看一下Vue中文社区描述文档：的介绍

Vue中文社区描述文档简单来说就是：初始渲染时的条件判断显示；

在实际开发中，我们经常使用v-if和v-show来表示判断。我们可以这样理解：

div class=' TC ' v-if=' pload list . length 1 ' img src=' http :/assets/img/mall _ none _ order . png '/div在上例中，v-if的作用是通过pload和list判断这个div是否显示，length为1。由于“是”和“否”的关系，只有当pload和list.length1都建立时，其中的div和img才会显示并生效。

相反，如果判断条件不为真，则不会显示v-if；

div class=' TC ' v-show=' pload list . length 1 ' img src=' http :/assets/img/mall _ none _ order . png '/div上面的案例代码其实可以改成v-show进行判断，视觉效果也是一样的。注意：只有同样的视觉效果，两者的关系并不相等(后面分析)；用v-show判断条件pload为真，列出来. length！只有建立后，div中的div和img标签才会生效；

上面说v-if和v-show都可以达到根据判断条件进行显示的效果，但这并不意味着两者相等；只有视觉效果一样。我们来谈谈v-if和v-show的区别以及注意事项：

使用v-if，我们可以注意到浏览器没有用元素类tc呈现div。这是因为如果判断条件为真，v-if只会在浏览时生成标签并渲染，否则判断条件为假，浏览器不会生成标签并渲染。

那我们可以考虑一下。当条件为假时，浏览器不会生成标记，也不会呈现。当条件为真时，浏览器仅呈现。这会消耗页面性能吗？

如果我们的判断条件不是只有一个场景，而是多个场景呢？那么这个时候我们该怎么办呢？Vue为我们提供v-else指令，是v-if的专属指令，只能和v-if一起使用；

如果我们用v-show来判断和渲染，里面的div标签和img都会生成和渲染，但是我们注意到浏览器在我们的内联样式中加入了display:none属性，所以本质上v-show标签是存在的，但是浏览器只为我们隐藏了它；其实浏览器只是根据判断条件改变内联样式，内联样式显示： block；条件为真时；当条件为false时，内联样式更改为display:none其实v-show比v-if性能更高，因为v-show只是动态改变样式，不需要添加或者删除DOM元素，但是在很多情况下涉及到分支判断的时候，v-show不能和v-else一起使用。在这个场景中使用v-show的方法是再次用v-show写另一个逻辑判断。

总结：

(1)、v-if和v-show用于视图层中的条件判断视图显示

(2)v-if的原理是根据判断条件动态添加和删除DOM元素，v-show根据判断条件动态显示和隐藏元素。频繁的DOM添加和删除操作会影响页面加载速度和性能，所以我们可以得出一个结论：

当你的项目程序不是很大的时候，v-if和v-show都可以用来显示和隐藏判断(在这种场景下使用v-if效果不大，不是没有效果)；

当你的项目程序比较大的时候，不建议使用v-if进行判断显示和隐藏，建议使用V-SHOW；

(3)只有v-if可以和v-else一起用于分支判断，但是v-show不能和v-else一起使用。在多个条件场景的情况下，可以使用v-if进行判断

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。