微信小程序数组绑定使用案例（二）
一、数组事件绑定，事件传递数据
1.wxml
<text>姓名：{{name}}
</text>
<block wx:for="{{list}}"><button bind:tap="nameClick2" data-name="{{item}}">修改:{{item}}</button>
</block>
2.js
/*** 页面的初始数据*/data: {name: '张三',list: ['张三', '李四', '王五', '赵六'],
},//列表修改nameClick2(e) {var name = e.currentTarget.dataset.name;console.info(name);this.setData({'name': name});},3.css 忽略
重点说明：
//微信小程序 data 数据单项绑定，setData方法修改属性并且渲染页面展示
// this.data.name='李四';
this.setData({
'name': '李四'
});
显示效果：
二、微信小程序 setData 修改对象
1.wxml
<text>姓名：{{stu.name}},年龄:{{stu.age}}
</text><button bind:tap="ageClick">增加年龄
</button>
2.js
//修改数据三ageClick() {var stu = this.data.stu;console.info(stu.age);//方案1，修改整个对象// stu.age=stu.age+1;// this.setData({// stu:stu// });//方案2,根据路径修改变量this.setData({'stu.age': stu.age + 1});},
3.css忽略
重点解读，根据路径修改对象：
//方案2,根据路径修改变量
this.setData({
'stu.age': stu.age + 1
});
三、微信小程序，setData 修改 数组中的属性
1.wxml
<block wx:for="{{stulist}}"><view style="padding: 20px;border:1px solid bisque;"><text>姓名：{{item.name}},年龄:{{item.age}}</text><button bind:tap="stulistClick" data-index="{{index}}">增加年龄</button></view>
</block>2.js
//修改数据 ，数组中的对象的属性stulistClick(e) {var index = e.currentTarget.dataset.index;var stulist = this.data.stulist;//修改 方案1//var stu = stulist[index];// stu.age = stu.age + 1;// this.setData({// ['stulist[' + index + ']']: stu// });//方案2this.setData({['stulist[' + index + '].age']: stulist[index].age + 1});},
3.css 代码忽略
重点整理：
//方案2
this.setData({
['stulist[' + index + '].age']: stulist[index].age + 1
});
更多：
微信小程序数组绑定使用案例（一）