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

news2024/9/23 7:22:40

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

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

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

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

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

相关文章

【BUG】已解决:xlrd.biffh.XLRDError: Excel xlsx file; not supported

已解决&#xff1a;xlrd.biffh.XLRDError: Excel xlsx file&#xff1b; not supported 目录 已解决&#xff1a;xlrd.biffh.XLRDError: Excel xlsx file&#xff1b; not supported 【常见模块错误】 错误原因 解决办法&#xff1a; 欢迎来到英杰社区https://bbs.csdn.net/…

【学习笔记】无人机系统(UAS)的连接、识别和跟踪(三)-架构模型和概念

引言 3GPP TS 23.256 技术规范&#xff0c;主要定义了3GPP系统对无人机&#xff08;UAV&#xff09;的连接性、身份识别、跟踪及A2X&#xff08;Aircraft-to-Everything&#xff09;服务的支持。 3GPP TS 23.256 技术规范&#xff1a; 【免费】3GPPTS23.256技术报告-无人机系…

Ubuntu 中默认的 root 用户密码

场景&#xff1a;想要切换root用户&#xff0c;发现得输入密码&#xff0c;以为是以前设置过然后一直尝试都是错误【认证失败】最后发现根本没设置过root用户&#xff0c;默认会随机生成root用户的密码&#x1f605; Ubuntu 中默认的 root 密码是随机的&#xff0c;即每次开机都…

Golang | Leetcode Golang题解之第263题丑数

题目&#xff1a; 题解&#xff1a; var factors []int{2, 3, 5}func isUgly(n int) bool {if n < 0 {return false}for _, f : range factors {for n%f 0 {n / f}}return n 1 }

数据结构->线性结构->顺序存储->静态链表

一、思路 链表由节点组成。 1、分析需求&#xff0c;画图&#xff1a; 2、定义学生结构体&#xff0c;包含姓名、年龄、性别和下一个学生的指针&#xff1a; #include <stdio.h> #define N 20// 定义性别枚举类型&#xff0c;固定值&#xff0c;不是男就是女 typedef e…

基于Centos7搭建rsyslog服务器

一、配置rsyslog可接收日志 1、准备新的Centos7环境 2、部署lnmp环境 # 安装扩展源 wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/repo/epel-7.repo# 安装扩展源 yum install nginx -y# 安装nginx yum install -y php php-devel php-fpm php-mysql php-co…

JVM:GraalVM

文章目录 一、介绍1、什么是GraalVM&#xff1a;2、GraalVM版本 二、两种使用模式 一、介绍 1、什么是GraalVM&#xff1a; GraalVM是Oracle官方推出的一款高性能JDK&#xff0c;使用它享受比OpenJDK或者OracleJDK更好的性能。GraalVM的官网地址&#xff1a;https://www.graa…

我在高职教STM32——串口通信(4)

大家好,我是老耿,高职青椒一枚,一直从事单片机、嵌入式、物联网等课程的教学。对于高职的学生层次,同行应该都懂的,老师在课堂上教学几乎是没什么成就感的。正因如此,才有了借助 CSDN 平台寻求认同感和成就感的想法。在这里,我准备陆续把自己花了很多心思的教学设计分享…

十年前的老电脑能装win10吗_十年前的老电脑用U盘安装win10教程

十年前的老电脑能装win10吗&#xff1f;十年前的老电脑只要满足win10最低要求的配置都可以安装win10。安装win10方法很多&#xff0c;有一键重装方法、U盘安装、硬盘安装等方式&#xff0c;但最靠谱的方式还是U盘安装。十年前的老电脑用U盘安装win10首先要将u盘制作成u盘启动盘…

Flutter中GetX的用法(超详细使用指南之路由依赖管理篇)

目录 1.前言 2.GetX 依赖管理概述 1.GetX 依赖管理的基本概念 2.与其他依赖管理工具的比较 3. 基础依赖注入 1.Get.put 2.Get.lazyPut 3.Get.putAsync 4.高级依赖注入 1.使用Get.create 2.依赖生命周期管理 5. 参考资料 1.前言 今天这篇博客主要介绍Getx的三大功能…

【AI学习】LLaMA 系列模型的进化(二)

在前面LLaMA 系列模型的进化&#xff08;一&#xff09;中学习了LLama模型的总体进化发展&#xff0c;再来看看其中涉及的一些重要技术。 PreLayerNorm Layer Norm有Pre-LN和Post-LN两种。Layer Normalization&#xff08;LN&#xff09;在Transformer架构中的放置位置对模型…

Java实战中如何使用多线程(线程池)及其为什么使用?

这个话题在入行之前就想过很多次&#xff0c;很多8古文或者你搜索的结果都是告诉你什么提高高并发或者是一些很高大上的话&#xff0c;既没有案例也没有什么公式去证明&#xff0c;但是面试中总是被问到&#xff0c;也没有实战经历&#xff0c;所以面试时一问到多线程的东西就无…

python os库使用教程

os库使用教程 1.创建文件夹os.path.exists&#xff08;&#xff09;检查文件是否存在os.listdir查看文件夹下的所有文件filename.endswith()查看文件列表的png或者txt结尾的所有文件shutil.move移动目标到文件夹 1.创建文件夹 先在盘符里创建一个文件用来演示&#xff0c;我这里…

GPT-LLM

本心、输入输出、结果 文章目录 GPT-LLM前言国际公司AI发展概览国内公司AI发展概览GPT-LLM 编辑 | 简简单单 Online zuozuo 地址 | https://blog.csdn.net/qq_15071263 如果觉得本文对你有帮助,欢迎点赞、收藏、评论 前言 国际公司AI发展概览 公司主要AI贡献与产品特点OpenAI…

【Qt】常用控件 Q widget的enabled属性,geometry属性

Qt是一个实现图形化程序的程序。为了便于我们开发&#xff0c;Qt为我们提供了许多“控件”。我们需要熟悉并掌握这些控件的使用。 一.什么是控件 控件是构成⼀个图形化界⾯的基本要素. 示例一&#xff1a; 像上述⽰例一中的,按钮,列表视图,树形视图,单⾏输⼊框,多⾏输⼊框,滚动…

数据恢复篇:适用于 Android 视频恢复的 6 个工具

在智能手机这个动态的世界里&#xff0c;每一刻都被捕捉并以数字方式存储&#xff0c;丢失珍贵的视频可能是一种令人心碎的经历。不必担心&#xff0c;因为 Android 生态系统提供了大量旨在挽救这些珍贵回忆的视频恢复应用程序。 这些应用程序是强大的工具&#xff0c;旨在挽救…

使用Amazon Web Services Lambda把天气预报推送到微信

最近北京开始下雨&#xff0c;开始和同事打赌几点能够雨停&#xff0c;虽然Iphone已经提供了实时天气&#xff0c;但是还是想用国内的API试试看看是不是更加准确些。 以下是我使用的服务&#xff1a; 地图SDK/APP获取 经纬度彩云天气API 通过地理位置获取天气信息Lambda 作为…

【颜色分类】python刷题记录

目录 刷油漆法 刷油漆法 润到字符串排序算法了。 双指针解法 刷了3次油漆 class Solution:def sortColors(self, nums: List[int]) -> None:"""Do not return anything, modify nums in-place instead."""#双指针解法n0n10nlen(nums)for …

Windows上让Qt支持https请求

一.前言 Qt默认其实支持https的&#xff0c;但需要openssl的支持。所以有时候你代码中写了支持https的请求连接&#xff0c;发现程序可以运行&#xff0c;但到了https请求时会报错&#xff0c;如下&#xff1a; 这就是没有openssl的支持&#xff0c;导致QSslSocket无法进行ht…

MySQL零散拾遗(四)

聚合函数 聚合函数作用于一组数据&#xff0c;并对一组数据返回一个值。 常见的聚合函数&#xff1a;SUM()、MAX()、MIN()、AVG()、COUNT() 对COUNT()聚合函数的更深一层理解 COUNT函数的作用&#xff1a;计算指定字段在查询结果中出现的个数&#xff08;不包含NULL值&#…