微信小程序数组绑定案例，修改数组中的值
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
});
实现效果：
更多：
