微信小程序使用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地址


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM