解决【v-show 有时失效】问题

目录

前言

1. web 端

 得出结论，v-show 生效是基于 css 的权重

2. 小程序端

---

前言

css选择器权重 CSS 样式优先级 | 菜鸟教程

“important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符”

1. web 端

Vue 的 v-show 在元素上实际上是使用内联样式 display: none 

因此对于比内联样式权重低的样式，v-show 会生效，但是如果 v-show 使用的元素上有一个 display: block !important，这时 v-show 是失效的

看看web端的元素审查

v-show 正常使用，生效

v-show 遇到 !important 失效

 得出结论，v-show 生效是基于 css 的权重

2. 小程序端

v-show 使用的是 attribute 中的 hidden 

hidden 样式为 display: none

到这里你应该知道了，属性选择器css权重是比较低的

审查元素可以看到，v-show 控制元素的 attribute 中的 hidden ，但是我们当前元素样式可能设置了其他的 display 属性，当该样式权重高于属性选择器权重时，则 v-show 失效。

因此，我们从 css 权重上解决问题

[hidden] {
  display: none !important;
}

如果你有更好的方法，可以一起讨论！

如果有用，就点个赞吧！