想自己做一个tab切换，但是v-show不能用。如果用v-if显然不合适，v-show再uni-app中和v-if使用方法不同吗？
Darly
- 发布：2019-07-20 18:20
- 更新：2024-11-13 16:08
- 阅读：19570
最佳回复
是 CSS 样式优先级的问题，非 H5 编译后元素上新增了一个 hidden 的属性，比如 v-show 放在了 <view id="abc">上 就会有一个 view[hidden]{display:none} 的样式，如果自己的样式重写了 display 属性 #abc{display:flex}，优先级就有可能高于它，所以自己可以再加一个 #abc[hidden]{display:none} 就行了。
v-show="false" 不生效的原因找到了,
css 权重问题
view[hidden] 权重值 10 + 1
使用全局样式
.u-flex 权重值 10
页面内写样式,
scoped 模式下 会自动生成一串css, 比如 class="indicator data-v-01011e28":
.indicator.data-v-01011e28 权重值 10 + 10 = 20
.container .indicator.data-v-01011e28 权重值 10 + 10 + 10 = 30
去掉 scoped
.indicator 权重值 10
.container .indicator 权重值 10 + 10 = 20
你好，我也遇到了这个问题，但和你场景不太一样，我是在一个自定义组件里，接收一个boolean参数，然后直接组件里用props的字段直接放到v-show里面，结果值改了UI不变，在H5里是可以消失的，但APP真机不行，我的解决方法是在组件里的data里再弄一个属性，然后赋值到这里面，然后v-show里面使用直接data里面的赋值字段，而不是props的，这样APP就可以响应变化了。
cookRice - 前端bug工程师
v-show在微信小程序中也有问题； H5表现正常， 微信小程序v-show失效； 我的解决方案是根据条件编译不同的指令来解决；
这个问题的原因我没有明白， 楼主搞明白为什么会出现这种问题的原因了吗
正确总结：
• props 是父组件传递给子组件的，子组件只能读取，而不能直接修改它。
• 如果子组件内部修改 props 的值，watch 无法监听到这些变化，因为 watch 只能监听父组件传递的 props 的变化。
• watch 只能监听父组件对 props 的修改，而不能监听子组件内部的修改。
• 这些刷新和回到顶部都是单项绑定的，
• 比如回到顶部，初始值是0，组件内部滚动改了props的值，但是是子组件改的props的值，watch认为还是0，所以在父组件再重置为0时，watch监听不到，所以回不到顶部
刷新同样如此，必须在下拉刷新时修改刷新的值为true,不然不是父组件更改的v-bind的值，下拉刷新组件（子组件）本身修改props,watch监听不到，认为还是false,导致父组件设置v-bind为false,watch也认为是false,导致watch不触发，但是其实下拉刷新为true，watch又不改所以导致刷新加载一直持续
<scroll-view :scroll-y="true" class="list" :scroll-top="scrollTop" />
const scrollTop = ref(0.01);//初始值设置（注意：不要设置成0，不然无效）
const top_fn = () => {//滚动到顶部函数
scrollTop.value = scrollTop.value + 0.00001 //如果scrollTop.value和上一次相同无法触发scroll-view组件内的watch事件，因此在此加个0.00001
}
coderH
挖坟要坐牢
2024-09-06 09:08