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

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

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端获取不到这个绑定的值?

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/874642.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

想学习Python爬虫的宝子们可以看过来,从基础开始看这一篇文章就够了!

1. 预备知识 学习者需要预先掌握Python的数字类型、字符串类型、分支、循环、函数、列表类型、字典类型、文件和第三方库使用等概念和编程方法。 2. Python爬虫基本流程 a. 发送请求 使用http库向目标站点发起请求&#xff0c;即发送一个Request&#xff0c;Request包含&am…

单调栈(随缘复习到了,顺手刷了)

也是不知道为什么突然又复习到单调栈了&#xff0c;所以顺手刷了三道题&#xff0c;总结一下 P6503 [COCI2010-2011#3] DIFERENCIJA 思路&#xff1a;这题是要求每个子区间里面的最大值和最小值的差&#xff0c;我们一开始想的必然是纯暴力呀&#xff0c;但是一看这数据&#…

自动驾驶系列—智能巡航辅助功能中的车道变换功能介绍

自动驾驶系列—智能巡航辅助功能中的车道中央保持功能介绍 自动驾驶系列—智能巡航辅助功能中的车道变换功能介绍 自动驾驶系列—智能巡航辅助功能中的横向避让功能介绍 自动驾驶系列—智能巡航辅助功能中的路口通行功能介绍 文章目录 1. 背景介绍2. 功能定义3. 功能原理4. 传感…

MySQL聚合函数(DQL)

先看一下我的表内容和数据&#xff0c;再做接下来的例子和讲解 1.聚合函数的基本语法 SELECT 聚合函数&#xff08;表中的某个字段&#xff09;FROM 表名; 2. 常见的聚合函数 举例 1.统计该企业的数量 select count(idcard) from emp; 2.统计该企业员工的平均年龄 select…

SpringBoot缓存注解使用

背景 除了 RedisTemplate 外&#xff0c; 自Spring3.1开始&#xff0c;Spring自带了对缓存的支持。我们可以直接使用Spring缓存技术将某些数据放入本机的缓存中&#xff1b;Spring缓存技术也可以搭配其他缓存中间件(如Redis等)进行使用&#xff0c;将某些数据写入到缓存中间件…

QSqlRelationalTableModel 增删改查

QSqlRelationalTableModel 可以作为关系数据表的模型类&#xff0c;适用于三范式设计的表&#xff0c;主表中自动加载外键表中的名称。本文实现QSqlRelationalTableModel 为模型类&#xff0c;实现增删改查。 目录 0.表准备 1. 构建表格数据 声明变量 表格、数据模型、选择…

全球价值链贸易核算matlab程序(TIVA与WWZ分解方法大全)以及区域表链接方法

数据来源&#xff1a;基础数据来源于世界银行、国家统计局时间范围&#xff1a;2007年数据范围&#xff1a;国家与行业层面样例数据&#xff1a; 包含内容&#xff1a; 全部数据下载链接&#xff1a;https://download.csdn.net/download/samLi0620/89567902

Redis的操作以及SpringCache框架

目录 一.什么是Redis&#xff1f; 二.Redis的相关知识&#xff1a; 三.如何操作Redis&#xff1f; 1&#xff0c;常用命令&#xff1a; 2.Spring Data Redis &#xff08;1&#xff09; pom.xml 配置&#xff1a; &#xff08;2&#xff09;配置Redis数据源&#xff1a; …

麒麟V10安装nginx、mysql报错缺少包:error while loading shared libraries libssl.so.10

背景 启动nginx报错&#xff1a;error while loading shared libraries libssl.so.10 解决 查看nginx启动文件所依赖的动态链接库&#xff08;即共享库或动态库&#xff09; ldd nginx-1.22.1/sbin/nginx离线安装compat-openssl10包 将依赖包麒麟v10安装openssl10依赖包上…

QT6.6+Opencv 4.6.0完成摄像头显示以及捕获照片的功能

效果图提前展示,想试试再往下看: 在网上找了很久QT的摄像头打开方式,成功了,但是捕获照片一直不成功,我不知道是不是qt6版本的原因:这个多媒体窗口我安装没有效果 QT += multimediawidgets之前使用过python的opencv,于是想到可以使用opencv来显示摄像头以及捕获照片。…

C++完整的学生管理系统

实现功能 添加、删除、修改学生为学生添加、删除、修改成绩将数据保存在students.txt和grades.txt里 效果图&#xff08;部分功能&#xff09; 添加学生 添加成绩 源代码 这里就不分多个文件了 编译时在连接器命令行加入以下命令 -stdc11 #include <ios…

极客天成NVFile全闪存储加速千卡AIGC大模型训练平台

01 中国AI算力核心产业现状 随着人工智能技术的快速发展和广泛应用&#xff0c;AI算力已成为推动数字经济和科技创新的关键基础设施。2024年&#xff0c;中国AI算力核心产业规模持续扩大&#xff0c;在全球AI发展格局中占据重要地位&#xff0c;中国AI算力核心产业规模达到约…

LangChain的数据增强

吾名爱妃&#xff0c;性好静亦好动。好编程&#xff0c;常沉浸于代码之世界&#xff0c;思维纵横&#xff0c;力求逻辑之严密&#xff0c;算法之精妙。亦爱篮球&#xff0c;驰骋球场&#xff0c;尽享挥洒汗水之乐。且喜跑步&#xff0c;尤钟马拉松&#xff0c;长途奔袭&#xf…

Spring事务(1)

目录 一、事务回顾 1、什么是事务&#xff1f; 2、为什么需要事务&#xff1f; 3、事务的操作 二、Spring 中事务的实现 1、代码准备&#xff1a; &#xff08;1&#xff09;创建项目 spring-trans&#xff0c;引入 Spring Web&#xff0c;MyBatis&#xff0c;MySQL等依…

【C++】C++前言

目录 一.什么是C 1.1.面向过程&#xff1a; 1.2.面向对象&#xff1a; 二.C发展历史 三.C版本更迭 3.1.语法更新 3.2.关于C2X最新特性的讨论&#xff1a; 3.3.关于C23的一个小故事&#xff1a; 四.C参考文档&#xff1a; 五.C的重要性&#xff1a; 5.1.编程语言排行榜…

JESD204B学习与仿真

平台&#xff1a;vivado2018.3 芯片&#xff1a;xcku115-flva1517-2-i 场景&#xff1a;在高速ADC和DAC芯片中&#xff0c;有使用源同步的时钟和数据同步传输的方式&#xff0c;但是需要在逻辑内部对其进行校准。如果使用jesd204b接口传输数据&#xff0c;设计人员不需要了解…

Vuex看这一篇就够了

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 非常期待和您一起在这个小…

Win11 改造

记录一些安装 win11 系统之后&#xff0c;对使用不习惯的地方&#xff0c;进行的个人改造 右键菜单 Hiyoung006/Win11Useable: 将Win11右键菜单及资源管理器恢复为Win10样式的脚本 切换到旧版右键菜单&#xff1a; reg add "HKCU\Software\Classes\CLSID\{86ca1aa0-34…

Web前端:HTML篇(二)元素属性

HTML 属性 属性是 HTML 元素提供的附加信息。 HTML 元素可以设置属性属性可以在元素中添加附加信息属性一般描述于开始标签属性总是以名称/值对的形式出现&#xff0c;比如&#xff1a;name"value"。 属性实例 HTML 链接由 <a> 标签定义。链接的地址在 href …

数据结构(二叉树-2)

文章目录 一、 实现链式结构二叉树 1.1 Tree.h 1.2 Tree.c 前中后序遍历 前序遍历 中序遍历 后续遍历 1.2 Tree.c 结点个数 1.3Tree.c 叶子节点个数 1.4 Tree.c 二叉树的高度 1.5 Tree.c 层序遍历 1.6 判断是否为完全二叉树 1.7 销毁二叉树 test.c 一、 实现链式结构二叉树 ⽤链…