vue:v-if 和 v-show 区别

  • v-show:v-show 通过设置内联样式的 display CSS 属性来工作,当元素可见时将使用初始 display值。当条件改变时,也会触发过渡效果。
    https://cn.vuejs.org/api/built-in-directives#v-show

  • v-if:基于表达式值的真假性,来条件性地渲染元素或者模板片段。当 v-if 元素被触发,元素及其所包含的指令/组件都会销毁和重构。如果初始条件是假,那么其内部的内容根本都不会被渲染。
    https://cn.vuejs.org/api/built-in-directives#v-if

v-if 和 v-show 区别

https://uniapp.dcloud.net.cn/tutorial/vue-basics.html#v-if-%E5%92%8C-v-show-%E5%8C%BA%E5%88%AB

  • v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
  • v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做,直到条件第一次变为真时,才会开始渲染条件块。
  • 相比之下,v-show 就简单得多,不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换,来控制元素的显示和隐藏。

根据应用场景选择

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

注意

  • 不推荐同时使用 v-if 和 v-for。
  • 当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值