v-if与v-show实例

v-if与v-show都能控制一个元素是否可见。不同的是:v-if在切换时,是将DOM节点删除或新建,而v-show只是对元素进行显示或隐藏。

实例:点击按钮,实现图片的切换,一张图片用v-if, 一张用v-show

切换.gif

具体代码

<!--切换时会删除/新建节点,开销比较大-->
<div class="one" v-if="flag">
    <img :src="one" alt="" width="300">
</div>
<!--只是改变元素的属性,初始化时加载时间较长-->
<div class="two" v-show="!flag">
    <img :src="two" alt="" width="300">
</div>

v-if元素被删除

v-show被隐藏

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

扫码关注云+社区

领取腾讯云代金券