当前位置: 首页 > news >正文

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

微信小程序数组绑定案例,修改数组中的值

1.Wxml 代码

<view class="list"><view class="item {{item.ischeck?'active':''}}" wx:for="{{list}}"><view class="title">{{item.name}} <text>({{item.id}})</text></view><view class="btndiv"><button>上移动</button><button bind:tap="downClick" data-index="{{index}}">下移动</button><button bind:tap="delClick" data-index="{{index}}">删除</button><checkbox checked="{{item.ischeck}}" bind:tap="checkClick" data-index="{{index}}">选中</checkbox></view></view>
</view>

2.js 代码

Page({/*** 页面的初始数据*/data: {list: [{id: 1,name: '张三',ischeck: true},{id: 2,name: '李四'},{id: 3,name: '王五'},{id: 4,name: '赵六'},]},//选中点击事件checkClick(e) {var index = e.currentTarget.dataset.index;var list = this.data.list;// console.info(index);//修改页面this.setData({['list[' + index + '].ischeck']: !list[index].ischeck});},//删除delClick(e) {var index = e.currentTarget.dataset.index;var list = this.data.list;list.splice(index, 1);this.setData({list: list});},//下移动downClick(e) {var index = e.currentTarget.dataset.index;var list = this.data.list;var next = index + 1;if (next == list.length) { //临界值//next=0;return;}//交换位置var temp = list[index];list[index] = list[next];list[next] = temp;this.setData({list: list});},/*** 生命周期函数--监听页面加载*/onLoad(options) {}
})

3.css代码忽略

重点解读:可以使用js对象路径方式,修改变量并重新绘制页面

    this.setData({

      ['list[' + index + '].ischeck']: !list[index].ischeck

    });

实现效果:

更多:

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

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

微信小程序事件绑定

相关文章:

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

微信小程序数组绑定案例&#xff0c;修改数组中的值 1.Wxml 代码 <view class"list"><view class"item {{item.ischeck?active:}}" wx:for"{{list}}"><view class"title">{{item.name}} <text>({{item.id}…...

Kudu节点数规划

作者&#xff1a;南墨 一、概述 由于Kudu是Hadoop生态的一部分&#xff08;虽然它不依赖于Hadoop生态系统&#xff09;&#xff0c;因此大多数实际应用场景需要的不仅仅是Kudu&#xff1b;为了输入数据&#xff0c;可能需要Kafka、StreamSets或Spark Streaming&#xff1b;对…...

flutter 充电气泡

前言&#xff1a; 之前一直看到 有手机充电的时候 有气泡从Type-C 的位置冒泡上来 慢慢上移&#xff0c; 然后和上面的圆圈 会和&#xff0c;感觉还是挺好看的。今天试了下用 Flutter 实现了一版本。大致效果如下&#xff0c;而且气泡 和 气泡直接还可以粘黏 实现原理&#xff…...

【C++】deque以及优先级队列

容器适配器 deque的介绍deque的原理介绍 priority_queue的介绍与使用priority_queue的介绍priority_queue的使用constructor&#xff08;构造函数&#xff09;emptypushpoptopsize priority_queue的模拟实现 仿函数何为适配器容器适配器deque的缺陷选择deque作为适配器的理由ST…...

手机如何播放电脑的声音?

准备工具&#xff1a; 有线耳机&#xff0c;手机&#xff0c;电脑&#xff0c;远控软件 1.有线耳机插电脑上 2.电脑安装pc版远控软件&#xff0c;手机安装手机端控制版远控软件 3.手机控制电脑开启声音控制 用手机控制电脑后&#xff0c;打开声音控制&#xff0c;电脑播放视频…...

系统架构设计师教程 第3章 信息系统基础知识-3.6 办公自动化系统(OAS)-解读

系统架构设计师教程 第3章 信息系统基础知识-3.6 办公自动化系统&#xff08;OAS&#xff09; 3.6.1 办公自动化系统的概念3.6.1.1 办公活动3.6.1.1 办公自动化的概念 3.6.2 办公自动化系统的功能3.6.2.1 事务处理3.6.2.1.1 单机系统3.6.2.1.2 多机系统 3.6.2.2 信息管理3.6.2.…...

解决Element UI 表格组件懒加载数据刷新问题

一、问题描述 element ui的table组件设置成懒加载时&#xff0c;遇到数据表格需要更新、删除等操作&#xff0c;子节点不会自动更新。 二、解决思路 刷新数据&#xff0c;就是重新调用load&#xff08;&#xff09;&#xff0c;通过map记录已展开的节点&#xff0c;需要刷新…...

【系统架构设计 每日一问】二 MySql主从复制延迟可能是什么原因,怎么解决

主从复制的架构设计如下图所示&#xff1a; 同步原理 具体到数据库之间是通过binlog和复制线程操作的&#xff1a; Master的更新事件(update、insert、delete)会按照顺序写入bin-log中。当Slave连接到Master的后,Master机器会为Slave开启&#xff0c;binlog dump线程,该线程…...

Ubuntu Grub引导优化

配置文件 sudo vim /etc/default/grub修改参数 引导菜单等待时间 GRUB_TIMEOUT3自动引导上次选择的系统 如果安装了双系统或多系统&#xff0c;可以考虑配置此参数。 # 此参数默认值为0&#xff0c;引导第一个引导项 GRUB_DEFAULTsaved# 此参数默认没有&#xff0c;需要手…...

第3关 -- Git 基础知识

任务1: 破冰活动&#xff1a;自我介绍 任务2: 实践项目&#xff1a;构建个人项目 MeiHuaYiShu...

AttributeError: ‘WebDriver‘ object has no attribute ‘find_element_by_xpath‘

问题&#xff1a; 跑之前的python爬虫代码的时候报错 AttributeError: WebDriver object has no attribute find_element_by_xpath 源代码&#xff1a; elements self.driver.find_elements_by_xpath("//tbody[starts-with(id,normalthread)]/tr/th/a[1]")原因&…...

题解:小S与机房里的电脑 Computer_C++算法竞赛_贪心_二分答案_模拟_数据结构

文章目录 小S与机房里的电脑 Computer传统题题目描述输入格式输出格式样例样例输入 1样例输出 1样例输入 2样例输出 2 提示解题思路AC CodeEnd 小S与机房里的电脑 Computer 传统题 时间限制: 1000ms内存限制: 256MiB 题目描述 最近小S想带他的学生打组队娱乐赛&#xff0c;…...

Python @staticmethod、super().__init__()和self

最近在看代码&#xff0c;由于之前没有系统学习过Python&#xff0c;就有些知识点不是很清楚&#xff0c;这里整理一下&#xff0c;方便以后查阅。 Python中的staticmethod\super.init和self Python 装饰器staticmethod和classmethod的作用与区别作用区别代码演示 super() 函数…...

Linux网络:应用层协议HTTP(一)

一、什么是HTTP协议 虽然我们说, 应用层协议是我们程序猿自己定的. 但实际上, 已经有大佬们定义了一些现成的, 又非常好用的应用层协议, 供我们直接参考使用. HTTP(超文本传输协议)就是其中之一。 在互联网世界中&#xff0c;HTTP&#xff08;HyperText Transfer Protocol&…...

Tomcat底层原理

Tomcat是一个开源的Java Servlet容器&#xff0c;它实现了Java Servlet和JavaServer Pages (JSP) 技术&#xff0c;用于运行Java Web应用。它是由Apache软件基金会开发和维护的。以下是对Tomcat底层原理的详细解析&#xff1a; 1. 启动流程 Tomcat的启动流程主要分为以下几个…...

【Linux】Linux环境设置环境变量操作步骤

Linux环境设置环境变量操作步骤 在一些开发过程中本地调试经常需要依赖环境变量的参数&#xff0c;但是怎么设置对小白来说有点困难&#xff0c;今天就介绍下具体的操作步骤&#xff0c;跟着实战去学习&#xff0c;更好的检验自己的技术水平&#xff0c;做技术还是那句话&…...

C语言:键盘录入案例

主要使用了scanf&#xff1b; scanf的使用方法和注意事项&#xff1a; 1.作用&#xff1a; 用于接收键盘输入的数据并赋值给对应的变量 2.使用方式; scanf("占位符",&变量名); 3.注意事项; 占位符后面的的变量要对应 第一个参数中不写换行 案例1&#xf…...

Nginx 中如何实现请求的排队机制?

Nginx 中如何实现请求的排队机制&#xff1f; 在当今数字化的时代&#xff0c;网站和应用的流量就如同潮水一般&#xff0c;时涨时落&#xff0c;时急时缓。想象一下&#xff0c;当流量如洪水猛兽般汹涌而来&#xff0c;服务器就像是那抗洪的堤坝&#xff0c;如果没有有效的管…...

synergy配置

今天介绍一个电脑同步软件synergy。 我们开发时一般会用两套设备&#xff0c;如果使用两套键盘操作起来会很麻烦&#xff0c;这个软件就是解决这个问题&#xff0c;可以使用一套键盘同时操作两台电脑&#xff0c;另一台作为客户端被控制。 安装 在两台电脑上各自下载安装syne…...

Qt开发网络嗅探器03

数据包分析 想要知道如何解析IP数据包&#xff0c;就要知道不同的IP数据包的包头结构&#xff0c;于是我们上⽹查查资料&#xff1a; 以太网数据包 ARP数据包 IPv4 IPv6 TCP UDP ICMP ICMPv6 根据以上数据包头结构&#xff0c;我们就有了我们的protocol.h文件&#xff0c;声明…...

跨语言沟通的革命性突破:FunASR语音翻译系统全解析

跨语言沟通的革命性突破&#xff1a;FunASR语音翻译系统全解析 你是否还在为国际会议中的语言障碍而烦恼&#xff1f;是否因跨国团队协作中的沟通不畅而效率低下&#xff1f;FunASR语音翻译系统将彻底改变这一现状&#xff0c;让跨语言交流如母语般自然流畅。读完本文&#xf…...

吃透MQ:从原理到落地,解决分布式系统的核心痛点

在分布式系统与微服务架构普及的今天&#xff0c;“高并发、高可用、低耦合”成为系统设计的核心诉求。而消息队列&#xff08;Message Queue&#xff0c;简称MQ&#xff09;&#xff0c;作为分布式架构中的“通信枢纽”&#xff0c;凭借异步通信、流量削峰、系统解耦等核心能力…...

飞行器设计避坑指南:盘点那些影响气动效率的‘隐形杀手’(从摩擦阻力到干扰阻力)

飞行器设计避坑指南&#xff1a;盘点那些影响气动效率的‘隐形杀手’ 记得第一次参加大学生飞行器设计竞赛时&#xff0c;我们的团队花了整整三个月打造了一架翼展两米的固定翼无人机。试飞当天&#xff0c;看着它摇摇晃晃地起飞&#xff0c;却在爬升阶段突然失速坠毁&#xff…...

PyTorch 2.8 + CUDA 12.4镜像实战教程:适配10核CPU+120GB内存的完整配置

PyTorch 2.8 CUDA 12.4镜像实战教程&#xff1a;适配10核CPU120GB内存的完整配置 1. 镜像概述与环境准备 1.1 核心特性介绍 这个深度优化镜像基于RTX 4090D 24GB显卡和CUDA 12.4驱动构建&#xff0c;专为高性能深度学习任务设计。主要特点包括&#xff1a; 硬件适配&#…...

Selenium爬虫被检测?3种隐藏WebDriver属性的实战技巧(附最新ChromeDriver配置)

Selenium爬虫被检测&#xff1f;3种隐藏WebDriver属性的实战技巧&#xff08;附最新ChromeDriver配置&#xff09; 在数据采集领域&#xff0c;Selenium一直是处理动态渲染页面的利器。但近年来&#xff0c;越来越多的网站开始部署针对自动化工具的检测机制&#xff0c;使得传统…...

告别繁琐配置:用快马一键生成wsl2环境初始化脚本

告别繁琐配置&#xff1a;用快马一键生成wsl2环境初始化脚本 最近在帮团队新成员配置开发环境时&#xff0c;发现每次手动搭建wsl2都要重复查找各种命令和配置步骤&#xff0c;效率实在太低。于是尝试用InsCode(快马)平台生成了一套自动化脚本&#xff0c;效果出乎意料地好。 …...

DeepSeek-OCR 2技术突破:动态视觉token重排效果展示

DeepSeek-OCR 2技术突破&#xff1a;动态视觉token重排效果展示 1. 引言 想象一下&#xff0c;当你阅读一份复杂的学术论文时&#xff0c;眼睛不会机械地从左上角扫到右下角&#xff0c;而是会自然地跳过标题、关注图表、追踪公式推导&#xff0c;甚至在不同的文本栏之间灵活…...

如何快速上手TradingView图表库:15+框架完整集成实战指南

如何快速上手TradingView图表库&#xff1a;15框架完整集成实战指南 【免费下载链接】charting-library-examples Examples of Charting Library integrations with other libraries, frameworks and data transports 项目地址: https://gitcode.com/gh_mirrors/ch/charting-…...

告别手动Dockerfile!io.fabric8插件如何用Maven配置自动生成镜像(附Spring Boot实战)

告别手动Dockerfile&#xff01;io.fabric8插件如何用Maven配置自动生成镜像&#xff08;附Spring Boot实战&#xff09; 在Java生态中&#xff0c;容器化部署已成为现代应用交付的标准方式。传统做法要求开发者同时维护Dockerfile和构建脚本&#xff0c;这种割裂的配置方式不仅…...

3个高效学习技巧:如何用JiYuTrainer实现课堂学习体验优化

3个高效学习技巧&#xff1a;如何用JiYuTrainer实现课堂学习体验优化 【免费下载链接】JiYuTrainer 极域电子教室防控制软件, StudenMain.exe 破解 项目地址: https://gitcode.com/gh_mirrors/ji/JiYuTrainer 问题场景&#xff1a;当数字化教学遇上学习需求冲突 "…...