当前位置: 首页 > 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. **缺点** 对比总结 动机 在软件构建过…...

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

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

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

如何在看板中有效管理突发紧急任务

在看板中有效管理突发紧急任务需要&#xff1a;设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP&#xff08;Work-in-Progress&#xff09;弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中&#xff0c;设立专门的紧急任务通道尤为重要&#xff0c;这能…...

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型(LLM)的广泛应用,开发者常面临多个挑战: 各大模型(OpenAI、Claude、Gemini、Ollama)接口风格不统一;缺乏一个统一平台进行模型调用与测试;本地模型 Ollama 的集成与前…...

AI,如何重构理解、匹配与决策?

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...