微信小程序入门踩坑系列（三）微信小程序动态修改data中数组的数据的某一个值

1.修改data的普通数据并显示

js中data的数据。

data: {
      IsRight:true,
      name:'zhou'
  },

wxml显示获取数据并显示

<view>
   <view bindtap ="b" style="font-size:50rpx">点击我</view>
   <view>---------------</view>
   <view>名字:{{name}}</view>
   <view>{{IsRight}}</view>
</view>

写了一个点击函数b

js中函数b。

 b:function(){
    let IsRight=this.data.IsRight;//声明变量
    let name = this.data.name;//声明变量
    this.setData({
      IsRight:false,//修改变量
      name:'jack'//修改变量
    })
  },

最主要就是函数中的setData方法。点击小程序界面的点击我，结果如下

2.动态修改data数组的具体数据并显示

data中的数组。

data: {
      IsRight:true,
      name:'zhou',
      array:[//待修改的数组
        { id: 1, name: '小红', age: 18 },
        { id: 2, name: '小黄', age: 20 },
        { id: 3, name: '小黑', age: 15 },
      ]
  },

wxml显示。

<view wx:for="{{array}}" wx:key="id">
  <view>id：{{item.id}}</view>
  <view bindtap="c" data-index="{{index}}">姓名：{{item.name}}</view>
  <view>年龄：{{item.age}}</view>
  <view>---------------</view>
</view>

我们给姓名那一栏设置一个点击事件c
显示如图
js中点击事件c。

c:function(e){
    let index=e.currentTarget.dataset.index;
    this.setData({
      ['array[' + index + '].name']: 'after'
    })
  },

注意中括号。
点击姓名所在那那一栏数据，结果如下图