Darly
Darly
  • 发布:2019-07-20 18:20
  • 更新:2023-12-27 16:52
  • 阅读:17019

uni-app v-show不生效,是不是有什么特别的用法?还是说不能用到自定义组件上?

分类:uni-app

想自己做一个tab切换,但是v-show不能用。如果用v-if显然不合适,v-show再uni-app中和v-if使用方法不同吗?

2019-07-20 18:20 负责人:无 分享
已邀请:
李博士1110

李博士1110

你好,我也遇到了这个问题,但和你场景不太一样,我是在一个自定义组件里,接收一个boolean参数,然后直接组件里用props的字段直接放到v-show里面,结果值改了UI不变,在H5里是可以消失的,但APP真机不行,我的解决方法是在组件里的data里再弄一个属性,然后赋值到这里面,然后v-show里面使用直接data里面的赋值字段,而不是props的,这样APP就可以响应变化了。

种子的信仰

种子的信仰

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

2***@qq.com

2***@qq.com - 前端开发小菜鸡

:class 切换样式

  • Darly (作者)

    你真是个机智的少年,所以v-show是不能用吗?


    2019-07-20 18:24

1***@qq.com

1***@qq.com - sdf

确实,父组件传过来的数据,不能像vue一样直接this.xxx遍历,需要在子组件的data里面定义一个属性来装父级传过来的数据,这样点击事件才会生效的

Yacheck

Yacheck

v-show 只适用基本组件,uni-app 会将v-show 的组件添加hidden属性,而在组件中添加hidden属性,不会起作用

root_ad

root_ad

自定义组件包一层view

<view v-show="boolean">  
<xxx/>  
</view>
cookRice

cookRice - 前端bug工程师

v-show在微信小程序中也有问题; H5表现正常, 微信小程序v-show失效; 我的解决方案是根据条件编译不同的指令来解决;
这个问题的原因我没有明白, 楼主搞明白为什么会出现这种问题的原因了吗

  • m***@163.com

    你这个问题解决了吗,我也是,小程序没用


    2020-01-19 14:52

  • 1***@qq.com

    回复 m***@163.com: 现在的v-show在小程序如果是内置组件是没问题,但是自定义组件是有问题的


    2020-08-08 10:32

ConFront_C_Eng
zzdev

zzdev

如果是在小程序中,可以在 App.vue 的 style 里添加

[hidden] {  
  display: none;  
}
Zainxy

Zainxy

用v-if 替代 v-show能解决

要回复问题请先登录注册