前端小白001：关于uni-app的v-show在微信小程序上的一些bug及解决思路

最新推荐文章于 2025-06-06 16:27:06 发布

侠宁

最新推荐文章于 2025-06-06 16:27:06 发布

阅读量4.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue javascript 小程序 css html

本文链接：https://blog.youkuaiyun.com/ReXplan/article/details/107710959

前端专栏收录该内容

7 篇文章

订阅专栏

本文探讨了uni-app中v-show在微信小程序上无法及时响应数据变化的问题，提供了解决方案，包括使用watch监听、计算属性computed以及避免伪元素hidden与flex布局的冲突。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于uni-app的v-show在微信小程序上的一些bug及解决思路

今天遇到v-show在微信小程序不能及时触发的问题，代码如下：

	<div v-show="list.length > 0">显示数据</div>

这段代码很常见，但在小程序上不能及时触发就让人很烦恼，不过我额外添加一个属性触发v-show就行了，代码如下：

//watch监听
watch{
	list(n){
		this.show = n.length > 0
	}
},
data(){
	show:false,
	list:[]
}
//computed计算属性
computed: {
	show(){
		return this.list.length > 0
	}
},
data(){
	list:[]
}

html上可以使用JSON.stringify转换为字符串进行判断即可，代码如下：

	<div v-show="JSON.stringify(list) !== '[]'">显示</div>
	<div v-show="JSON.stringify(list.length) !== '0'">显示</div>

然后有网友说是小程序设计的伪元素hidden和flex布局冲突的问题，我试了试，嗯，问题挺大的，然后看到了伪元素hidden，权重还大于dispaly: block？？？
代码如下:

view[hidden]{
	display: none;
}

view{
	display: block;/*这里在小程序上是被划掉了*/
}

然后发现list.length第一次不在v-show发生改变，所谓的伪元素hidden不过是

<div v-show="false">显示</div>

也就是说，伪元素hidden和flex布局实际上没有冲不冲突的问题，元素默认存在伪元素hidden，当存在其它非display:none布局形式时，会将display:none覆盖，除非自定义display:none的权重，或者最后一个执行display:none，这些官方都定义好了的，主要还是javascript的问题。

对于刚刚的v-show在微信小程序问题，在第一次获取到了data里的list为空数组的长度0，但切换获取数据时list.length还是不会自行改变，也就是页面上的length还是第一次获取的长度0，但没被触发，实际上list发生改变了，如果使用计算属性computed进行计算length，然后在v-show上进行判断也是可以的，唯独直接在v-show上获取list的长度length作判断是不行的