「重看vue」:v-if , v-show 区别

作者 : 开心源码 本文共469个字,预计阅读时间需要2分钟 发布时间: 2022-05-12 共113人阅读

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

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

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

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


v-if 与 v-for 一起用:

当 v-if 与 v-for 一起用时,v-for 具备比 v-if 更高的优先级。

当它们处于同一节点,v-for 的优先级比 v-if 更高,这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你想为仅有的少量项渲染节点时,这种优先级的机制会十分有使用,如下:

  • {{ todo }}

  • 上面的代码只传递了未完成的 todos。

    而假如你的目的是有条件地跳过循环的执行,那么可以将 v-if 置于外层元素 (或者 )上。如:

    • {{ todo }}

    No todos left!

    说明
    1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
    2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
    3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
    4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
    5. 如有链接无法下载、失效或广告,请联系管理员处理!
    6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
    7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
    开心源码网 » 「重看vue」:v-if , v-show 区别

    发表回复