一、数组事件绑定，事件传递数据
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
// });
//方案2
this.setData({
['stulist[' + index + '].age']: stulist[index].age + 1
});
},
3.css 代码忽略
重点整理：
//方案2
this.setData({
['stulist[' + index + '].age']: stulist[index].age + 1
});
更多：
