前端小白003: 关于uniapp在微信小程序的标签内赋值问题

原创于 2020-09-04 18:37:37 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

前端专栏收录该内容

7 篇文章

订阅专栏

探讨了在uniapp中微信小程序的标签内赋值问题，解析了数组遍历触发事件改变状态值的错误示范，并提供了正确的解决方案，通过触发函数改变状态值。

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

关于uniapp在微信小程序的标签内赋值问题

<!-- 数组遍历触发事件改变状态值的错误示范 -->
<view v-for="(item, index) in list" :key="index" @tap="item.show = !item.show">改变</view>

<!-- 单个变量可以这么做 -->
<view @tap="item.show = !item.show">改变</view>

data(){
	return {
		item: {
			show:false
		},
		list: [
			{show:false},
			{show: true}
		]
	}
}

上面代码预期并触发手柄tap的结果是item.show=true，但在微信小程序可不能这么玩，如果是单纯的某个指定的变量是可以实现的，但以遍历的方式去触发改变状态值的话是不可行的，但可以通过触发一个函数去改变状态值，解决方法就是以一个函数去改变状态值，代码如下：

<view v-for="(item, index) in list" :key="index" @tap="changeShow(item, index)">改变</view>

data(){
	return {
		list: [
			{show:false},
			{show: true}
		]
	}
},
methods: {
	changeShow(item, index) {
		this.list[index].show = !item.show
	}
}