微信小程序数组绑定使用案例（二）

一、数组事件绑定，事件传递数据

1.wxml

<text>
  姓名：{{name}}
</text>
<block wx:for="{{list}}">
  <button bind:tap="nameClick2" data-name="{{item}}">修改:{{item}}</button>
</block>

2.js

  /**
   * 页面的初始数据
   */
  data: {
    name: '张三',
    list: ['张三', '李四', '王五', '赵六'],
},
  //列表修改
  nameClick2(e) {
    var name = e.currentTarget.dataset.name;
    console.info(name);
    this.setData({
      'name': name
    });
  },

3.css 忽略

重点说明：

    //微信小程序  data 数据单项绑定，setData方法修改属性并且渲染页面展示

    // this.data.name='李四';

    this.setData({

      'name': '李四'

    });

显示效果：

二、微信小程序 setData 修改对象

1.wxml

<text>
  姓名：{{stu.name}},年龄:{{stu.age}}
</text>

<button bind:tap="ageClick">
  增加年龄
</button>

2.js

  //修改数据三
  ageClick() {
    var stu = this.data.stu;
    console.info(stu.age);

    //方案1，修改整个对象
    // stu.age=stu.age+1;
    // this.setData({
    //   stu:stu
    // });

    //方案2,根据路径修改变量
    this.setData({
      'stu.age': stu.age + 1
    });

  },

3.css忽略

重点解读，根据路径修改对象：

    //方案2,根据路径修改变量
    this.setData({
      'stu.age': stu.age + 1
    });

三、微信小程序，setData 修改 数组中的属性

1.wxml

<block wx:for="{{stulist}}">
  <view style="padding: 20px;border:1px solid bisque;">
    <text>
      姓名：{{item.name}},年龄:{{item.age}}
    </text>

    <button bind:tap="stulistClick" data-index="{{index}}">
      增加年龄
    </button>
  </view>
</block>

2.js

  //修改数据 ，数组中的对象的属性
  stulistClick(e) {
    var index = e.currentTarget.dataset.index;
    var stulist = this.data.stulist;

    //修改 方案1
    //var stu = stulist[index];
    // stu.age = stu.age + 1;
    // this.setData({
    //   ['stulist[' + index + ']']: stu
    // });

    //方案2
    this.setData({
      ['stulist[' + index + '].age']: stulist[index].age + 1
    });
  },

3.css 代码忽略

重点整理：

   //方案2

    this.setData({

      ['stulist[' + index + '].age']: stulist[index].age + 1

    });

更多：

微信小程序数组绑定使用案例（一）

input组件 type为nickname pc端获取不到这个绑定的值？

微信小程序触屏事件_上划下划事件

原文地址：https://blog.csdn.net/u011127019/article/details/140571907

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！