导语：《web前端笔记20》js—vue一个元素是否渲染v-show与v-if 对比原理

1：作用: 决定了一个元素是否渲染。

v-if 条件为false时候，压根不会有相应的元素在DOM中。只有为true时候才会渲染。

如果想每次都渲染的话 就加上key

<input placeholder= key=>

v-show 当条件为false，仅仅是将元素设置为display：none。

2：如何选择？

当页面在显示和隐藏之间很频繁，使用v-show。

当只有一次切换的时候，使用v-if。

3：原理

（1）v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；

也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

（2） v-show 就简单得多—不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 “display” 属性进行切换。

所以，v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景。

（3）不推荐同时使用 v-if 和 v-for 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级

这个是面试必问的问题。

免责声明:本站部份内容由优秀作者和原创用户编辑投稿，本站仅提供存储服务，不拥有所有权,不承担法律责任。若涉嫌侵权/违法的，请反馈，一经查实立刻删除内容。本文内容由快快网络小快创作整理编辑！