美文网首页
v-if和v-show

v-if和v-show

作者: 欧巴桑桑 | 来源:发表于2021-03-22 17:27 被阅读0次

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

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

相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

用 key 管理可复用的元素

Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外,还有其它一些好处。

v-if 与 v-for 一起使用

不推荐同时使用 v-if 和 v-for。请查阅风格指南以获取更多信息。

当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级。请查阅列表渲染指南以获取详细信息。

相关文章

  • vue2.0基础(一、内部指令)

    指令 1、条件判断 v-if v-else v-show ### v-if 和v-show的区别: v-if:...

  • 2018-05-22 指令

    v-if && v-show && v-else v-if和v-show的区别:v-if 判断是否加载,如果时fa...

  • v-show v-if v-bind 和display

    一、v-show和v-if:v-show和v-if都可以控制元素的显示或隐藏,但是v-show是用display控...

  • Vue学习笔记二:Vue基础语法

    1.模板语法 2.属性绑定 3.条件渲染 v-if & v-show v-if 和v-show的区别:v-if: ...

  • vue2.0题目

    1 .v-show和v-if的区别 v-show 通过css display 控制显示和隐藏 v-if 组件真正的...

  • Vue2学习笔记:vue条件渲染

    一、v-if ①template v-if ②v-else ③v-show 二、v-if vs v-show 学好...

  • vue基础

    v-show和v-if v-show跟v-if都是做条件隐藏跟显示用的, v-show是根据样式进行显示隐藏dis...

  • 前端性能优化

    一、代码层面的优化 (1)v-if 和 v-show 区分使用场景 v-if是DOM的销毁和重建,v-show只是...

  • 第二天

    1、v-show和v-if区别? v-show判断节点是否隐藏 v-if 判断节点是否渲染 2、vue中key的作...

  • v-show v-if v-for

    1: v-if和v-show的区别 v-if v-if 最终会被编译成三元运算符 v-show 编译的时候编译成指...

网友评论

      本文标题:v-if和v-show

      本文链接:https://www.haomeiwen.com/subject/mdfthltx.html