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被隐藏

如想了解更多的vue实例，请查阅我的vue笔记目录