小程序为数组中的对象添加元素，修改元素

最新推荐文章于 2025-07-08 11:18:17 发布

原创最新推荐文章于 2025-07-08 11:18:17 发布 · 1.2w 阅读

13 ·

CC 4.0 BY-SA版权

小程序专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何在小程序中动态地为数组中的对象添加和修改元素。通过使用`wx:for`循环数据，结合字符串拼接动态设置属性，并利用取余数实现颜色线条的循环展示。

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

写在前：想添加一个属性，向data中的、某个数组中、已存在的对象中。

第一步：静态页面使用wx:for 循环数据（本例中使用假数据）

<block wx:for="{{timearr}}">
	<view class="timeterm row">
		<view class="borderbg {{item.timecolor}}">{{item.timename}}</view>
		<view class="time">{{item.timeinterval}}</view>
	</view>
</block>

第二步：简单样式（自调）

.timeterm {
	width: 100%;
	height: 140rpx;
	font-size: 14px;
	color: #333;
	margin-top: 36rpx;
	padding-top: 28rpx;
	justify-content: space-between;
	/* background-color: pink; */
	border-radius: 8rpx;
	box-shadow: 0 2rpx 18rpx 0 rgba(0, 0, 0, .1);

}

.time {
	margin-right: 4%;
}

.borderbg {
	width: 50%;
	height: 100%;
	border-left: 2px solid #FE7C45;
	border-bottom: 2px solid #FE7C45;
	padding-left: 4%;
	border-radius: 0 0 0 8rpx;
}

.violet {
	border-left: 2px solid #886cff;
	border-bottom: 2px solid #886cff;
}

.yello {
	border-left: 2px solid #ffbc01;
	border-bottom: 2px solid #ffbc01;
}

.orange {
	border-left: 2px solid #fe6969;
	border-bottom: 2px solid #fe6969;
}

第三步：重点抽取

let timecolor = "timearr[" + i +"].timecolor"

当我们想增加属性，修改数组对象中的属性值，可以获取到哪一项，其中 i 就是循环出来的下标，字符串拼接后赋值，以便使用；如下：中括号中的就是修改项，（另一中方法就是直接把赋值前的项直接放在中括号内，需自测）

that.setData({
[timecolor]:'violet'
})

data: {
		timearr: [{
				timename: '时段1',
				timeinterval: '08:20 ~ 11:30',
			},
			{
				timename: '时段2',
				timeinterval: '08:20 ~ 11:30',
			},
			{
				timename: '时段3',
				timeinterval: '08:20 ~ 11:30',
			},
		]
	},

    //进入页面调用方法  
    onLoad: function(options) {
		this.colourTap();
	},
	// 颜色填充
	colourTap: function() {
		let that = this;
		let arr = this.data.timearr;
		let objone = {
			timecolor: 'violet'
		}
		for (var i = 0; i < arr.length; i++) {
			let timecolor = "timearr[" + i + "].timecolor"
			if (i % 3 == 0) {
				that.setData({
					[timecolor]: 'violet'
				})
			}
			if (i % 3 == 1) {
				that.setData({
					[timecolor]: 'yello'
				})
			} else if (i % 3 == 2) {
				that.setData({
					[timecolor]: 'orange'
				})
			}
		}
	},

注，本例中实现三个颜色的线条循环出现，重点是取余数。