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

微信小程序 checkbox 实现双向绑定以及特殊交互处理

wxml文件代码如下:

<!--页面顶部 引入wxs文件-->
<wxs module="tools" src="../../filter/tools.wxs"></wxs>
...
<checkbox-group bindchange="checkboxChange"><label class="weui-cell weui-check__label" wx:for="{{cancerItems}}" wx:key="value"><view class="weui-cell__hd"><checkbox value="{{item.value}}" checked="{{tools.getIncludes(checkedCancers, item.value)}}"/></view><view class="weui-cell__bd">{{item.name}}</view></label>
</checkbox-group>

js代码如下:

Page({data: {// 癌种cancerItems: [{value: 'fou', name: '否'},{value: 'fei', name: '肺癌'},{value: 'ruxian', name: '乳腺癌'},{value: 'wei', name: '胃癌'},{value: 'gan', name: '肝癌'},{value: 'qita', name: '其他'}],checkedCancers: [], // 选择的癌种},checkboxChange (event) {console.log('event', event)let checkedVal = event.detail.valueif (checkedVal[checkedVal.length - 1] === 'fou') { // 如果用户选择了“否”,则其他癌种清空checkedVal = ['fou']} else { // 如果选择癌种或者“其他”,“否”取消选择const index = checkedVal.indexOf('fou')if (index > -1) {checkedVal.splice(index, 1)}if (checkedVal.includes('fou')) { // 如果选择“其他”//}}this.setData({checkedCancers: checkedVal})}
})

所谓tool.getIncludes 方法需要 引入 tool.wxs 文件
文件代码如下:

var tools = {getIncludes: function(val, target) {if(!val) returnif(val.indexOf(target) > -1) {return true} else {return false}}
}
module.exports = {getIncludes: tools.getIncludes
}

注:微信小程序提到:WXS(WeiXin Script)是内联在 WXML 中的脚本段。通过 WXS 可以在模版中内联少量处理脚本,丰富模板的数据预处理能力。另外, WXS 还可以用来编写简单的 WXS 事件响应函数

相关文章:

微信小程序 checkbox 实现双向绑定以及特殊交互处理

wxml文件代码如下&#xff1a; <!--页面顶部 引入wxs文件--> <wxs module"tools" src"../../filter/tools.wxs"></wxs> ... <checkbox-group bindchange"checkboxChange"><label class"weui-cell weui-check__…...

我在高职教STM32——I2C通信之读写EEPROM(1)

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

【ARM】应用ArmDS移植最小FreeRTOS系统

【更多软件使用问题请点击亿道电子官方网站】 一、文档背景 FreeRTOS&#xff08;Free Real-Time Operating System&#xff09;是一个开源的实时操作系统内核&#xff0c;广泛应用于嵌入式系统。它具有小巧、灵活、低功耗等特点&#xff0c;支持多任务调度、信号量、队列等实…...

golang下载、上传文件MD5高效计算方法,利用io.TeeReader函数特性 实时计算文件md5签名

在go语言的开发中&#xff0c;当我们在操作下载或者上传文件对象时&#xff0c; 我们可以利用golang内置的io包中的 TeeReader函数特性&#xff0c;高效实时计算文件的md5值。 方法如下&#xff1a; TeeReader高效计算文件md5示例 保存上传文件&#xff0c;并使用文件的md5签…...

TreeMap实现根据值比较

前言&#xff1a; TreeMap普通的排序方法都是根据键来比较来排序&#xff0c;本篇文章实现两种方式实现值排序 1.使用 SortedSet 和 Stream API 如果你想要一个持久化的排序结果&#xff0c;你可以使用 SortedSet 结构来存储键值对的条目。 TreeSet<Map.Entry<String, …...

2024前端面试(内容持续更新)

Vue篇 data为什么是个函数&#xff1f; 在‌Vue中&#xff0c;‌data必须是一个‌函数&#xff0c;这是因为当data是函数时&#xff0c;每个组件实例化时都会调用该函数&#xff0c;返回一个新的数据对象&#xff0c;从而保证每个组件实例拥有独立的数据&#xff0c;避免数据冲…...

接口基础知识5:详解request headers(一篇讲完常见字段)

课程大纲 一、请求头的定义 HTTP请求头部&#xff08;HTTP Request Headers&#xff09;&#xff1a;HTTP协议中的一部分&#xff0c;用于在客户端和服务器之间传递附加信息。这些头部字段提供了关于请求、客户端环境、或请求的上下文的信息。 请求头是键值对的形式&#xff…...

mac的node使用

查看当前Node和npm版本 node -v npm -v安装"n"版本管理工具 sudo npm install -g n 更新node版本 sudo n stable // 稳定版本 sudo n lts // 最新稳定版本 sudo n latest // 最新版本 sudo n xx.xx // 更新到指定版本查看node版本安装集合 n ls切换对应node版…...

HTML - 简易版打字练习

1. 赛博朋克风格的视觉设计 颜色与渐变&#xff1a;通过linear-gradient设置了背景的颜色渐变&#xff0c;使用高饱和度的霓虹色彩&#xff08;如橙色、绿色和蓝色&#xff09;来营造赛博朋克的视觉效果。这种配色方案是赛博朋克风格的典型元素。 立体感和阴影&#xff1a;使用…...

【生成式人工智能-四-chatgpt的训练过程-pretrain预训练自督导式学习督导式学习】

大模型是怎么被训练出来的具有人类智慧的 阶段一训练-自我学习-具备知识训练资料self-supervised learning&#xff08;自督导式学习&#xff09; 阶段二-怎么让模型具备人的智慧supervised learning 督导式学习预训练pretrain为什么要用预训练的模型&#xff1f;Adapter逆向工…...

期权价格的奥秘:深入理解影响因素

在金融市场中&#xff0c;期权作为一种衍生工具&#xff0c;为投资者提供了风险管理和资产增值的多种可能性。期权价格的波动往往令人着迷&#xff0c;但其背后的定价机制却充满了复杂性。本文将带您探索期权价格变化的奥秘&#xff0c;并尝试以浅显易懂的方式&#xff0c;解析…...

STM32-USART时序与寄存器状态分析

一、时序分析 在UART&#xff08;通用异步收发传输&#xff09;通信中&#xff0c;信号线上的状态分为两种&#xff1a;逻辑1&#xff08;高电平&#xff09;和逻辑0&#xff08;低电平&#xff09;。在空闲状态下&#xff0c;数据线应保持逻辑高电平。UART协议中的各个信号位具…...

从零安装pytorch并在pycharm中使用

背景介绍 目前主流使用的工具有Facebook搞的pythorch和谷歌开发的tensorflow两种&#xff0c;二者在实现理念上有一定区别&#xff0c;pytorch和人的思维模式与变成习惯更像&#xff0c;而tensorflow则是先构建整体结构&#xff0c;然后整体运行&#xff0c;开发调试过程较为繁…...

开源AI工具FastGPT和RagFlow对比

FastGPT和RagFlow都是基于大型语言模型&#xff08;LLM&#xff09;的先进AI系统&#xff0c;它们在多个方面有着各自的特点和优势。 以下是对两者性能的详细对比&#xff1a; 一、系统架构与功能 FastGPT&#xff1a; 数据收集&#xff1a;通过从互联网上收集大量的文本数…...

第N2周:NLP中的数据集构建

对于初学者&#xff0c;NLP中最烦人的问题之一就数据集的构建问题&#xff0c;处理不好就会引起shape问题&#xff08;各种由于shape错乱导致的问题&#xff09;。这里给出一个模版&#xff0c;大家可根据这个模版来构建。 torch.utils.data是PyTorch中用于数据加载和预处理的…...

AI助力浮雕创作!万物皆可浮雕?Stable Diffusion AI绘画【浮雕艺术】之文生浮雕!

前言 对于浮雕艺术&#xff0c;其实并不了解。但有幸能和“细辛”前辈结识&#xff0c;对浮雕有了简单的了解&#xff0c;浮雕图案的传统方式是先由画师画出图&#xff0c;然后由雕刻师雕刻。画师画图归为浮雕的设计阶段&#xff0c;画师会绘制出浮雕的设计图&#xff0c;‌这为…...

你觉得大模型时代该出现什么?

大模型的概念都火了两年了&#xff0c;之前各种媒体吹嘘大模型的出现是类似“蒸汽机时代”、“iPhone时刻”等等。那为什么我们期待的结果都没出现呢&#xff1f;咱们先一起回顾下历史。 1、蒸汽机时代 1.1、蒸汽机历史 许多人都在讨论大模型时代好像只是概念在火&#xff0…...

JS【详解】事件委托

事件委托的简介 事件委托&#xff08;Event Delegation&#xff09;是 JS 处理事件的一种技术&#xff1a;不直接在目标元素上设置事件监听器&#xff0c;而是在其父元素或祖先元素上设置监听器&#xff0c;然后利用事件冒泡机制来捕获和处理事件。 事件委托的好处 减少内存占用…...

谈对象系列:C++类和对象

文章目录 一、类的定义1.1类定义的格式类的两种定义方法结构体&#xff1a; 1.2访问限定符1.3类域 二、实例化2.1变量的声明和定义2.2类的大小计算空类的大小&#xff08;面试&#xff09;&#xff1a; 三、this指针小考题 一、类的定义 1.1类定义的格式 使用class关键字&…...

设计模式20-备忘录模式

设计模式20-备忘录 动机定义与结构定义结构 C代码推导优缺点应用场景总结备忘录模式和序列化备忘录模式1. **动机**2. **实现方式**3. **应用场景**4. **优点**5. **缺点** 序列化1. **动机**2. **实现方式**3. **应用场景**4. **优点**5. **缺点** 对比总结 动机 在软件构建过…...

19c补丁后oracle属主变化,导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

解决:Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分&#xff1a; 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...

手机平板能效生态设计指令EU 2023/1670标准解读

手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读&#xff0c;综合法规核心要求、最新修正及企业合规要点&#xff1a; 一、法规背景与目标 生效与强制时间 发布于2023年8月31日&#xff08;OJ公报&…...

【LeetCode】算法详解#6 ---除自身以外数组的乘积

1.题目介绍 给定一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O…...