微信小程序数组绑定案例,修改数组中的值
1.Wxml 代码
<view class="list"><view class="item {{item.ischeck?'active':''}}" wx:for="{{list}}"><view class="title">{{item.name}} <text>({{item.id}})</text></view><view class="btndiv"><button>上移动</button><button bind:tap="downClick" data-index="{{index}}">下移动</button><button bind:tap="delClick" data-index="{{index}}">删除</button><checkbox checked="{{item.ischeck}}" bind:tap="checkClick" data-index="{{index}}">选中</checkbox></view></view>
</view>
2.js 代码
Page({/*** 页面的初始数据*/data: {list: [{id: 1,name: '张三',ischeck: true},{id: 2,name: '李四'},{id: 3,name: '王五'},{id: 4,name: '赵六'},]},//选中点击事件checkClick(e) {var index = e.currentTarget.dataset.index;var list = this.data.list;// console.info(index);//修改页面this.setData({['list[' + index + '].ischeck']: !list[index].ischeck});},//删除delClick(e) {var index = e.currentTarget.dataset.index;var list = this.data.list;list.splice(index, 1);this.setData({list: list});},//下移动downClick(e) {var index = e.currentTarget.dataset.index;var list = this.data.list;var next = index + 1;if (next == list.length) { //临界值//next=0;return;}//交换位置var temp = list[index];list[index] = list[next];list[next] = temp;this.setData({list: list});},/*** 生命周期函数--监听页面加载*/onLoad(options) {}
})
3.css代码忽略
重点解读:可以使用js对象路径方式,修改变量并重新绘制页面
this.setData({
['list[' + index + '].ischeck']: !list[index].ischeck
});
实现效果:
更多: