微信小程序数组绑定使用案例(二)

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

1.wxml

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

2.js

javascript 复制代码
  /**
   * 页面的初始数据
   */
  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

html 复制代码
<text>
  姓名:{{stu.name}},年龄:{{stu.age}}
</text>

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

2.js

javascript 复制代码
  //修改数据三
  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

html 复制代码
<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

javascript 复制代码
  //修改数据 ,数组中的对象的属性
  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 }); 更多: [微信小程序数组绑定使用案例(一)](https://mp.csdn.net/mp_blog/creation/editor/140571776 "微信小程序数组绑定使用案例(一)") ### [input组件 type为nickname pc端获取不到这个绑定的值?](https://blog.csdn.net/u011127019/article/details/139532032 "input组件 type为nickname pc端获取不到这个绑定的值?") ### [微信小程序触屏事件_上划下划事件](https://blog.csdn.net/u011127019/article/details/136416707 "微信小程序触屏事件_上划下划事件")

相关推荐
清风絮柳4 小时前
51. “闲转易”交易平台小程序(基于springboot&vue)
vue.js·spring boot·小程序·毕业设计·校园二手交易平台·二手交易小程序·闲转易交易系统
说私域5 小时前
基于开源AI大模型与S2B2C模式的线下服务型门店增长策略研究——以AI智能名片与小程序源码技术为核心
大数据·人工智能·小程序·开源
小程序照片合成6 小时前
uniapp微信小程序开发工具本地获取指定页面二维码
微信小程序·小程序·uniapp·二维码
低代码布道师6 小时前
加油站小程序实战教程05活动管理
低代码·小程序
教练 我想学编程7 小时前
学习记录706@微信小程序+springboot项目 真机测试 WebSocket错误: {errMsg: Invalid HTTP status.}连接不上
spring boot·学习·微信小程序
arbboter10 小时前
【AI插件开发】Notepad++ AI插件开发实践:从Dock窗口集成到功能菜单实现
人工智能·notepad++·动态菜单·notepad++插件开发·dock窗口集成·ai代码辅助工具·ai对话窗口
橘猫云计算机设计10 小时前
基于django优秀少儿图书推荐网(源码+lw+部署文档+讲解),源码可白嫖!
java·spring boot·后端·python·小程序·django·毕业设计
认真敲代码的小火龙14 小时前
微信小程序(下)
微信小程序·小程序
Mr.Liu615 小时前
小程序29-事件穿参-mark 自定义数据
前端·微信小程序·小程序
web_Hsir15 小时前
uniapp 微信小程序项目中 地图 map组件 滑动面板
微信小程序·uni-app·notepad++