微信小程序使用setData修改数组中的指定下标的属性值

注释的比较详细,就不过做多解释了。

//index.js
//获取应用实例
const app = getApp()

Page({
  // 这里data就是你当前界面所有的值。包括你后期动态添加的值都在这里
  data: {
    list: [{ //定义数组
        number: 1
      },
      {
        number: 1
      },
      {
        number: 1
      },
      {
        number: 1
      },
      {
        number: 1
      }
    ]
  },
  //事件处理函数
  itemSelect: function(e) {
    // 这里说一下他们的区别:target指向发生事件的组件,currentTarget指向绑定事件的组件
    // 1.currentTarget: 绑定的事件当前元素及其子元素都会触发
    // 2.target: 绑定的事件 子元素不会被触发事件
    var _this = this;
    console.log(e); //仔细看控制台
    //list就是你js中data中的定义的一个数组变量,[]里面的值代表数组的下标,number是你申明的这个数组中的key,拼接在一起,结果就是当前下标的值
    var index = "list[" + e.currentTarget.dataset.index + "].number"; //这里必须这样拼接
    //因为小程序中分有逻辑层和渲染层等。所以我们需要用setdata函数,渲染到视图界面。
    _this.setData({ //异步刷新,就是渲染
    //这里进行赋值
      [index]: 0 //修改值为0
    })
  },

})
<!--index.wxml-->
<view class="container">
  <!-- wx:key可以什么都不用写,我就是为了不让控制台出现警告,强迫症 -->
  <view class='bg' wx:for="{{list}}" wx:key="">
    <!-- 这里的{{index}}是wx:for自带的,直接引用就行了 -->
    <text bindtap='itemSelect' data-index="{{index}}">number:{{item.number}}</text>
  </view>
</view>
/**app.wxss**/

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20rpx;
}

.bg {
  color: green;
  border: 2rpx solid crimson;
  margin: 20rpx;
}

text {
  padding: 10rpx;
}

懒得复制的朋友,可以点一下~
Demo地址

  • 6
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值