zoukankan      html  css  js  c++  java
  • 微信小程序使用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地址

  • 相关阅读:
    输入输出、基本运算符、流程控制
    Node学习6-fs模块
    Node学习5-events模块
    Node学习4-Buffer模块
    Node学习3-Path模块
    Node学习2-基础知识/HelloWorld/模块调用/global/process
    Node学习1-基本概念
    gulp/bower/less知识
    AngularJS学习1-基础知识
    JavaScript学习-类/原型链/class
  • 原文地址:https://www.cnblogs.com/guowenrui/p/10362730.html
Copyright © 2011-2022 走看看