微信小程序数组绑定使用案例(一)
微信小程序数组绑定案例,修改数组中的值
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文件,声明…...
简易版抽奖活动的设计技术方案
1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...
MFC内存泄露
1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...
服务器硬防的应用场景都有哪些?
服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式,避免服务器受到各种恶意攻击和网络威胁,那么,服务器硬防通常都会应用在哪些场景当中呢? 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...
微信小程序 - 手机震动
一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注:文档 https://developers.weixin.qq…...
python报错No module named ‘tensorflow.keras‘
是由于不同版本的tensorflow下的keras所在的路径不同,结合所安装的tensorflow的目录结构修改from语句即可。 原语句: from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后: from tensorflow.python.keras.lay…...
NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合
在汽车智能化的汹涌浪潮中,车辆不再仅仅是传统的交通工具,而是逐步演变为高度智能的移动终端。这一转变的核心支撑,来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒(T-Box)方案:NXP S32K146 与…...
R语言速释制剂QBD解决方案之三
本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...
JavaScript基础-API 和 Web API
在学习JavaScript的过程中,理解API(应用程序接口)和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能,使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...
比较数据迁移后MySQL数据库和OceanBase数据仓库中的表
设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...
LabVIEW双光子成像系统技术
双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制,展现出显著的技术优势: 深层组织穿透能力:适用于活体组织深度成像 高分辨率观测性能:满足微观结构的精细研究需求 低光毒性特点:减少对样本的损伤…...
