欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 健康 > 养生 > 微信小程序数组绑定使用案例(二)

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

2025/2/24 3:19:28 来源:https://blog.csdn.net/u011127019/article/details/140571907  浏览:    关键词:微信小程序数组绑定使用案例(二)

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

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// });//方案2this.setData({['stulist[' + index + '].age']: stulist[index].age + 1});},

3.css 代码忽略

重点整理:

   //方案2

    this.setData({

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

    });

更多:

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

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

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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词