
v-if和v-show都是条件渲染指令,用于控制元素或模板的渲染,也就是控制DOM元素的显示和隐藏。
v-ifv-if是“真正”的条件渲染。它控制的是DOM节点
当表达式的值为true或false时,生成或移除一个元素。类似于JavaScript中的if条件判断。
它是惰性的,若在初始渲染时条件为false,什么也不做直到条件值为true时,才会开始渲染条件块。
除了v-if不有v-else-if和v-else。
显示
隐藏
v-if中的isshow其值为true,相当于v-if="true",页面显示内容为“显示”
v-show它控制的是DOM节点的display属性。不管初始条件是什么,元素总会被渲染,且只是简单基于css进行切换。
当v-show值为true时,DOM元素的display值为block,反之,display值为none。用户看不到元素,但其DOM元素还存在,只是隐藏了而已。
两者的使用总结
注意:v-show 不支持语法,也不支持v-else语法
实际使用中,可根据下面的应用场景情况,选择适合的条件渲染指令。
| v-if | v-show | |
|---|---|---|
| 开销 | 有更高的切换开销 | 有更高的初始渲染开销 |
| 频繁切换 | 更好 | |
| 运行时条件较少改变 | 更好 |
补充:v-if 判断是否加载,可以减轻服务器的压力,在需要时才会加载;v-show 调整DOM元素的CSS的dispaly属性,可以使客户端 *** 作更加流畅。
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)