v-show跟v-if的区别

v-show 指令: 根据表达式之真假值,切换元素的 display css 属性。

注意:一般值适用布尔类型,不过其他类型的值也没有问题,不过要注意类型的转换。
在这里插入图片描述
v-if 指令: 通过表达式的值来控制元素是否渲染 (v-if=‘xxx’ xxx就是表达式)
在这里插入图片描述
v-if 的效果与 v-show 基本一样,但是有区别:
1.v-if: 是真正的数据渲染,默认条件为 false 时元素不渲染,默认条件为 true 时元素渲染;条件为 false 时元素会销毁,条件为 true 时元素会重新创建。
v-show 是简单的的去控制 css 中的 display 属性。

2.v-if 有更高的切换开销 (切换时做销毁和重建的操作);
v-show 有更高的初始渲染开销(因为不管默认条件为 true 还是 false ,都会渲染出来);
如果频繁切换显示隐藏使用功能,用 v-show 更好,其余时间使用 v-if 即可。

  1. v-if 有 v-else-if 和 v-else 配套使用;
    v-show 孤零零一个人。

  2. v-if 能配合 template 元素使用,而 v-sho 不行;
    在这里插入图片描述
    那么问题来了,为什么 v-show 不能跟与 template 去使用呢?
    答:因为 template 是不会渲染出来的, v-show 是要去控制元素的 css 属性的 。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值