v-show无效,v-if有效的影响

v-if的作用:通过控制Dom节点的存在与否
v-show的作用是:控制元素的显隐,设置dom元素的display的样式
他们两者的区别就是是否影响性能方面,
如果经常性用到了切换,就需要用v-show
如果是偶尔性的切换,那就用v-if
但按照常理来说,不考虑性能方面,我们一般能用v-if也一定可以用到v-show
但最近小编在撸代码的过程中,遇到了一个神奇的事
我用了element ui中的table组件,有两列是要进行点击切换显隐的。如图
在这里插入图片描述
用了v-show失效,奇怪,后来发现,原来是因为v-show起作用的本质是display:none,而因为td的display: table-cell;权限高于display:none,所以v-show失效
权限的问题,所以table中要用到切换显隐的,需要用v-if,v-show无效。
另外,这里也有另一个知识点,v-if切换标签时,多个相同的标签被渲染,如果不添加key来区分则会出现复用的情况,所以table中要进行切换的列或者行,要加上key的值

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值