v-if与v-show实例

作者: 闲睡猫 | 来源:发表于2018-07-04 08:58 被阅读9次

vue(2)
Vue2学习笔记：vue条件渲染
vue2.0基础知识点
Vue中 v-if 和 v-show 的理解
v-if与v-show实例
vue2.0基础(一、内部指令)
Vue面试题
vue系统学习1-内部指令
Vue面试题汇总
2018-05-22 指令

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(2)
条件渲染条件渲染指令 1）v-if 与 v-else 2）v-show 比较 v-if 与 v-show 3）如...
Vue2学习笔记：vue条件渲染
一、v-if ①template v-if ②v-else ③v-show 二、v-if vs v-show 学好...
vue2.0基础知识点
1、v-if与v-show的区别条件渲染 (使用v-if) 条件展示 (使用v-show) 2、关于vue中Wa...
Vue中 v-if 和 v-show 的理解
一、v-show与v-if的共同点我们都知道在 vue 中 v-show 与 v-if 的作用效果是相同的(不含...
v-if与v-show实例
v-if与v-show都能控制一个元素是否可见。不同的是：v-if在切换时，是将DOM节点删除或新建，而v-sho...
vue2.0基础(一、内部指令)
指令 1、条件判断 v-if v-else v-show ### v-if 和v-show的区别： v-if：...
Vue面试题
001、v-show与v-if的区别 v-show:操作的是元素的display属性v-if:操作的是元素的创建和...
vue系统学习1-内部指令
1、v-if与v-show区别 v-if：按需加载dom，可以减轻服务器的压力。v-show：dom已加载好，调...
Vue面试题汇总
1. v-if与v-show区别 v-if只有当条件是true才进行渲染，是真正的销毁和重建。v-show无论条件...
2018-05-22 指令
v-if && v-show && v-else v-if和v-show的区别：v-if 判断是否加载，如果时fa...