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

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

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.rhkb.cn/news/381043.html

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

相关文章

【Linux知识点汇总】07 Linux系统防火墙相关命令,关闭和开启防火墙、开放端口号

​完整系列文章目录 【Linux知识点汇总】 心血来潮突然想起之前写过的系列文章【Linux知识点汇总】还未完结&#xff0c;那么今天就继续吧 说明&#xff1a;这个系列的内容&#xff0c;在系列【Linux服务器Java环境搭建】中会经常用到&#xff0c;大家可以自行查找相关命令 一、…

springboot开发实用篇

一、Mongodb &#xff08;1&#xff09;简介 MongoDB是一个开源、高性能、无模式的文档型数据库。NoSQL数据库产品中的一种&#xff0c;是最像关系型数据库的非关系型数据库。 数据库&#xff1a;永久性存储&#xff0c;修改频率极低 Mongodb&#xff1a;永久性存储与临时存…

使用百度语音技术实现文字转语音

使用百度语音技术实现文字转语音 SpringBootVue前后端分离项目 调用api接口需要使用AK和SK生成AccessToken,生成getAccessToken的接口有跨域限制,所以统一的由后端处理了 部分参数在控制台->语音技术->在线调试里面能找到 Controller RestController RequestMapping(&q…

游戏常用运行库安装包 Game Runtime Libraries Package

游戏常用运行库安装包&#xff08;Game Runtime Libraries Package&#xff09;是一个整合了多种游戏所需运行库的安装程序&#xff0c;旨在帮助玩家和开发者解决游戏无法正常运行的问题。该安装包支持从Windows XP到Windows 11的系统&#xff0c;并且具备自动检测系统并推荐合…

【python】OpenCV—Extreme Points in the Contour

文章目录 1、需求描述2、功能实现3、更多的例子4、完整代码5、参考 1、需求描述 给一张图片&#xff0c;找出其轮廓&#xff0c;并画出轮廓的上下左右极值点 输入图片 输出效果 2、功能实现 # 导入必要的包 import imutils import cv2 # 加载图像&#xff0c;将其转换为灰度…

【数据集处理工具】将COCO格式数据集的val.json与tett.json文件合并为一个json

合并COCO数据集JSON文件的Python脚本 1、目的2、功能概述3、使用方法4、注意事项5、 代码部分 1、目的 此Python脚本旨在帮助用户合并多个COCO格式的数据集JSON文件&#xff0c;特别适用于将验证集和测试集的标注数据整合到单一文件中。 该脚本假设各个数据集的类别信息&…

django踩坑(四):终端输入脚本可正常执行,而加入crontab中无任何输出

使用crontab执行python脚本时&#xff0c;有时会遇到脚本无法执行的问题。这是因为crontab在执行任务时使用的环境变量与我们在终端中使用的环境变量不同。具体来说&#xff0c;crontab使用的环境变量是非交互式(non-interactive)环境变量&#xff0c;而终端则使用交互式(inter…

国内访问Docker Hub慢问题解决方法

在国内访问Docker Hub时可能会遇到一些困难&#xff0c;但幸运的是&#xff0c;有多种解决方案可以帮助你顺利下载Docker镜像。以下是一些有效的解决方案&#xff1a; 配置Docker镜像源&#xff1a;你可以通过配置Docker的daemon.json文件来使用国内镜像源&#xff0c;比如DaoC…

基于若依的ruoyi-nbcio流程管理系统修正自定义业务表单的回写bug

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 http://218.75.87.38:9666/ 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码&#xff1a; h…

项目收获总结--大数据量存储架构设计方案

项目收获总结--大数据量存储架构设计方案 一、背景二、数据存储层技术选型2.1 MySQL2.2 MongoDB2.3 HBase2.4 HBaseElasticSearch 三、HBaseElasticSearch基本原理3.1 前置考虑3.2 HBaseElasticSearch优点3.3 HBaseElasticSearch缺点 四、HBaseElasticSearch数据一致性架构4.1 …

linux系统设置开机启动的两种方法systemd及rc.local(手工写sh脚本,手工写service服务)

文章目录 知识点实验一、systemd&#xff08;一&#xff09;自写一个sh脚本并加入开机启动&#xff08;二&#xff09;源码安装的nginx加入开机启动 rc.local 知识点 在Linux系统中&#xff0c;有多种方法可以设置开机启动。以下是其中的一些主要方法&#xff1a; systemd 在较…

3.3-LSTM的改进

文章目录 1改进点1.1多层化1.2 dropout1.2.1具体概念1.2.2应该插入到LSTM模型的哪里 1.3权重共享 2改进之后的LSTMLM的代码实现2.1初始化2.2前向计算2.3反向传播 3相应的学习代码的实现4总结 1改进点 1.1多层化 加深神经网络的层数往往能够学习更复杂的模式&#xff1b;因此这…

5种梯度下降法的公式

5种梯度下降法的公式推演&#xff1a; 1. 梯度下降 (Gradient Descent) 梯度下降法的更新公式为&#xff1a; θ t 1 θ t − η ∇ θ J ( θ ) \theta_{t1} \theta_t - \eta \nabla_\theta J(\theta) θt1​θt​−η∇θ​J(θ) 其中&#xff0c; θ t \theta_t θt​…

Tomcat服务器

1.Tomcat定义以及作用 Web服务器是一个应用程序(软件)&#xff0c;对HTTP协议的操作进行封装&#xff0c;使得程序员不必直接对协议进行操作。(不用程序员自己写代码去解析http协议规则&#xff0c;比如不用考虑响应码的问题&#xff0c;以及响应数据应该如何写)&#xff0c;让…

ZK学习笔记

ZK 一.基本概念 Zookeeper是⼀个开源的分布式协调服务&#xff0c;其设计⽬标是将那些复杂的且容易出错的分布式⼀致性服务封装起来&#xff0c;构成⼀个⾼效可靠的原语集&#xff0c;并以⼀些简单的接⼝提供给⽤户使⽤。 zookeeper是⼀个典型的分布式数据⼀致性的解决⽅案&…

在 PostgreSQL 里如何实现数据的冷热数据分层存储的自动化策略调整?

&#x1f345;关注博主&#x1f397;️ 带你畅游技术世界&#xff0c;不错过每一次成长机会&#xff01;&#x1f4da;领书&#xff1a;PostgreSQL 入门到精通.pdf 文章目录 在 PostgreSQL 里如何实现数据的冷热数据分层存储的自动化策略调整 在 PostgreSQL 里如何实现数据的冷…

ip地址是电脑还是网线决定的

在数字化时代的浪潮中&#xff0c;网络已经成为了我们日常生活和工作不可或缺的一部分。当我们谈论网络时&#xff0c;IP地址无疑是一个核心的概念。然而&#xff0c;关于IP地址的分配和决定因素&#xff0c;很多人可能存在误解。有些人认为IP地址是由电脑决定的&#xff0c;而…

mybatisPlus和mybatis的版本冲突问题、若依换成MP、解决git无法推送、使用若依框架的swagger、以后再遇到团队项目应该怎么做。

20240716 一. mybatisPlus和mybatis的版本冲突问题1. 使用前的准备2. 我遇到了一个很严重的问题。3. 解决问题&#xff0c;好吧也没解决&#xff0c;发现问题&#xff01;&#xff01; 二、该死的git&#xff01;&#xff01;&#xff01;&#xff01;1. 解决无法在idea中使用g…

CBSD bhyve Ubuntu 配置vnc登录管理

CBSD介绍 CBSD是为FreeBSD jail子系统、bhyve、QEMU/NVMM和Xen编写的管理层。该项目定位为一个综合解决方案的单一集成工具&#xff0c;用于使用预定义的软件集以最少的配置快速构建和部署计算机虚拟环境。 虽然CBSD没有提供额外的操作系统级功能&#xff0c;但它极大地简化了…

fatal: not a git repository (or any of the parent directories): .git

问题描述&#xff1a; 通过git pull 拉取代码提示&#xff1a; fatal: not a git repository (or any of the parent directories): .git 这个错误信息表明你当前所在的目录不是一个 Git 仓库&#xff0c;或者任何父目录中都没有 .git 目录。 问题解决&#xff1a; 确认当前目…