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

最新推荐文章于 2024-04-23 00:52:45 发布

侠宁

最新推荐文章于 2024-04-23 00:52:45 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue.js 前端

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

前端专栏收录该内容

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
	}
}