阅读量:0
一、数组事件绑定，事件传递数据
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
});
更多：
