微信小程序数组绑定使用案例(一)
微信小程序数组绑定案例,修改数组中的值
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端获取不到这个绑定的值?
微信小程序触屏事件_上划下划事件
微信小程序事件绑定
相关文章:
微信小程序数组绑定使用案例(一)
微信小程序数组绑定案例,修改数组中的值 1.Wxml 代码 <view class"list"><view class"item {{item.ischeck?active:}}" wx:for"{{list}}"><view class"title">{{item.name}} <text>({{item.id}…...
Kudu节点数规划
作者:南墨 一、概述 由于Kudu是Hadoop生态的一部分(虽然它不依赖于Hadoop生态系统),因此大多数实际应用场景需要的不仅仅是Kudu;为了输入数据,可能需要Kafka、StreamSets或Spark Streaming;对…...
flutter 充电气泡
前言: 之前一直看到 有手机充电的时候 有气泡从Type-C 的位置冒泡上来 慢慢上移, 然后和上面的圆圈 会和,感觉还是挺好看的。今天试了下用 Flutter 实现了一版本。大致效果如下,而且气泡 和 气泡直接还可以粘黏 实现原理ÿ…...
【C++】deque以及优先级队列
容器适配器 deque的介绍deque的原理介绍 priority_queue的介绍与使用priority_queue的介绍priority_queue的使用constructor(构造函数)emptypushpoptopsize priority_queue的模拟实现 仿函数何为适配器容器适配器deque的缺陷选择deque作为适配器的理由ST…...
手机如何播放电脑的声音?
准备工具: 有线耳机,手机,电脑,远控软件 1.有线耳机插电脑上 2.电脑安装pc版远控软件,手机安装手机端控制版远控软件 3.手机控制电脑开启声音控制 用手机控制电脑后,打开声音控制,电脑播放视频…...
系统架构设计师教程 第3章 信息系统基础知识-3.6 办公自动化系统(OAS)-解读
系统架构设计师教程 第3章 信息系统基础知识-3.6 办公自动化系统(OAS) 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组件设置成懒加载时,遇到数据表格需要更新、删除等操作,子节点不会自动更新。 二、解决思路 刷新数据,就是重新调用load(),通过map记录已展开的节点,需要刷新…...
【系统架构设计 每日一问】二 MySql主从复制延迟可能是什么原因,怎么解决
主从复制的架构设计如下图所示: 同步原理 具体到数据库之间是通过binlog和复制线程操作的: Master的更新事件(update、insert、delete)会按照顺序写入bin-log中。当Slave连接到Master的后,Master机器会为Slave开启,binlog dump线程,该线程…...
Ubuntu Grub引导优化
配置文件 sudo vim /etc/default/grub修改参数 引导菜单等待时间 GRUB_TIMEOUT3自动引导上次选择的系统 如果安装了双系统或多系统,可以考虑配置此参数。 # 此参数默认值为0,引导第一个引导项 GRUB_DEFAULTsaved# 此参数默认没有,需要手…...
第3关 -- Git 基础知识
任务1: 破冰活动:自我介绍 任务2: 实践项目:构建个人项目 MeiHuaYiShu...
AttributeError: ‘WebDriver‘ object has no attribute ‘find_element_by_xpath‘
问题: 跑之前的python爬虫代码的时候报错 AttributeError: WebDriver object has no attribute find_element_by_xpath 源代码: 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想带他的学生打组队娱乐赛,…...
Python @staticmethod、super().__init__()和self
最近在看代码,由于之前没有系统学习过Python,就有些知识点不是很清楚,这里整理一下,方便以后查阅。 Python中的staticmethod\super.init和self Python 装饰器staticmethod和classmethod的作用与区别作用区别代码演示 super() 函数…...
Linux网络:应用层协议HTTP(一)
一、什么是HTTP协议 虽然我们说, 应用层协议是我们程序猿自己定的. 但实际上, 已经有大佬们定义了一些现成的, 又非常好用的应用层协议, 供我们直接参考使用. HTTP(超文本传输协议)就是其中之一。 在互联网世界中,HTTP(HyperText Transfer Protocol&…...
Tomcat底层原理
Tomcat是一个开源的Java Servlet容器,它实现了Java Servlet和JavaServer Pages (JSP) 技术,用于运行Java Web应用。它是由Apache软件基金会开发和维护的。以下是对Tomcat底层原理的详细解析: 1. 启动流程 Tomcat的启动流程主要分为以下几个…...
【Linux】Linux环境设置环境变量操作步骤
Linux环境设置环境变量操作步骤 在一些开发过程中本地调试经常需要依赖环境变量的参数,但是怎么设置对小白来说有点困难,今天就介绍下具体的操作步骤,跟着实战去学习,更好的检验自己的技术水平,做技术还是那句话&…...
C语言:键盘录入案例
主要使用了scanf; scanf的使用方法和注意事项: 1.作用: 用于接收键盘输入的数据并赋值给对应的变量 2.使用方式; scanf("占位符",&变量名); 3.注意事项; 占位符后面的的变量要对应 第一个参数中不写换行 案例1…...
Nginx 中如何实现请求的排队机制?
Nginx 中如何实现请求的排队机制? 在当今数字化的时代,网站和应用的流量就如同潮水一般,时涨时落,时急时缓。想象一下,当流量如洪水猛兽般汹涌而来,服务器就像是那抗洪的堤坝,如果没有有效的管…...
synergy配置
今天介绍一个电脑同步软件synergy。 我们开发时一般会用两套设备,如果使用两套键盘操作起来会很麻烦,这个软件就是解决这个问题,可以使用一套键盘同时操作两台电脑,另一台作为客户端被控制。 安装 在两台电脑上各自下载安装syne…...
Qt开发网络嗅探器03
数据包分析 想要知道如何解析IP数据包,就要知道不同的IP数据包的包头结构,于是我们上⽹查查资料: 以太网数据包 ARP数据包 IPv4 IPv6 TCP UDP ICMP ICMPv6 根据以上数据包头结构,我们就有了我们的protocol.h文件,声明…...
OpenClaw安全指南:使用GLM-4.7-Flash时的权限管理
OpenClaw安全指南:使用GLM-4.7-Flash时的权限管理 1. 为什么需要特别关注OpenClaw的安全配置 当我第一次在本地部署OpenClaw并接入GLM-4.7-Flash模型时,最让我震惊的是这个框架赋予AI的权限范围。它不仅能读取我的文件,还能执行系统命令、发…...
ROS2数据录制实战:手把手教你用ros2 bag记录Duckiebot图像数据(附常见错误排查)
ROS2数据录制实战:从Duckiebot仿真到真实场景的全流程指南 在机器人开发过程中,数据记录与分析是算法验证和系统调试的关键环节。ROS2提供的ros2 bag工具链为开发者提供了强大的数据采集能力,但实际应用中往往会遇到各种意料之外的问题。本文…...
英雄联盟智能辅助套件:重新定义MOBA游戏体验的开源工具集
英雄联盟智能辅助套件:重新定义MOBA游戏体验的开源工具集 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit League-Tool…...
JavaWeb Listener 监听器详解:三大域对象监听 + 在线人数统计实战
前言Listener(监听器)是 JavaWeb 三大组件最后一个,专门用于监听 Web 域对象的创建、销毁、属性变化,在事件触发时自动执行逻辑。它是基于观察者模式实现,常用于:服务器初始化、在线用户统计、Session 监听…...
BLE5.1 与蓝牙Mesh 在手环数字车钥匙中的角色与体验升级
可穿戴数字车钥匙把传统实体钥匙的能力收敛到手环、手表等贴身设备上,通过近距无线链路与车载控制器或专用通信单元交互,支持解闭锁、启动、迎宾等操作。典型实现会组合 低功耗蓝牙(BLE) 做常在线链路与距离感知,并以 …...
4个步骤让普通用户实现黑苹果EFI自动生成:OpCore Simplify智能工具全解析
4个步骤让普通用户实现黑苹果EFI自动生成:OpCore Simplify智能工具全解析 【免费下载链接】OpCore-Simplify A tool designed to simplify the creation of OpenCore EFI 项目地址: https://gitcode.com/GitHub_Trending/op/OpCore-Simplify 如何用智能工具解…...
破局B站音频提取难题:BilibiliDown革新性解决方案全解析
破局B站音频提取难题:BilibiliDown革新性解决方案全解析 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader 😳 项目地址: https://gitcode.com/gh_mirrors…...
Elasticsearch-03-kNN算法
Elasticsearch-03-kNN算法详解 概述 Elasticsearch提供了强大的k近邻(k-Nearest Neighbors, kNN)搜索功能,支持两种实现方式:暴力搜索和近似搜索。本文档将详细介绍这两种kNN算法的原理、优缺点和适用场景。 1. 暴力搜索ÿ…...
Java 面试八股文(全网最全20w字)
一、Java 基础知识 1、Object 类相关方法 getClass 获取当前运行时对象的 Class 对象。hashCode 返回对象的 hash 码。clone 拷贝当前对象, 必须实现 Cloneable 接口。浅拷贝对基本类型进行值拷贝,对引用类型拷贝引用;深拷贝对基本类型进行…...
Typora式优雅写作体验:基于PyTorch模型的智能Markdown内容助手
Typora式优雅写作体验:基于PyTorch模型的智能Markdown内容助手 1. 重新定义写作工具 想象一下这样的场景:你正在用Markdown写一篇技术文档,刚敲下几个关键词,编辑器就自动补全了整个段落;当你纠结某个表达是否恰当时…...
