uniapp,点击选中并改变颜色,第二次点击取消选中状态
一、效果图

二、代码实现
字符串的indexOf和数组的indexOf用法一致!
arr.indexOf(item) 该方法返回某个元素在数组中的位置。若没检索到,则返回 -1。
关键代码:(通过:class绑定)
:class="selectList.indexOf(sub.type) !== -1 ? 'right_item right_item_active':'right_item'"
2.1html
<view class="right"><!-- 通过(selectList.indexOf(sub.type) !== -1)来判断选中的数组里,是否有该元素。点击时,如果有,会移除;如果没有,会添加上 --><view :class="selectList.indexOf(sub.type) !== -1 ? 'right_item right_item_active':'right_item'"v-for="(sub,index) in leftList[tabindex].children" :key="index" @click="rightBtn(sub,index)">{{ sub.type }}</view></view>
2.2js
//点击右侧rightBtn(sub, index) {console.log(sub, index)this.rightindex = index;//uniapp 数组添加不重复元素if (this.selectList.includes(sub.type)) {this.selectList = this.selectList.filter((item) => {return item != sub.type;});} else {this.selectList.push(sub.type);this.selectList = [...new Set(this.selectList)]; // 数组去重if (this.selectList.length > 3) {uni.showToast({title: "最多选3个",icon: "none"});this.selectList.splice(3, this.selectList.length - 3);}}},
完成~
相关文章:
uniapp,点击选中并改变颜色,第二次点击取消选中状态
一、效果图 二、代码实现 字符串的indexOf和数组的indexOf用法一致! arr.indexOf(item) 该方法返回某个元素在数组中的位置。若没检索到,则返回 -1。 关键代码:(通过:class绑定) :class"selectList.indexOf(sub.type) ! -1 ? right_ite…...
mmyolo的bbox_loss和检测bbox都是空
最近用mmyolo训练自己的数据集的时候发现训练的时候loss_bbox0,测试和eval的时候结果也全是空的,排除了数据集读取的问题,最后发现是config中自定义了自己的类别但是没有传给dataset。。。 简而言之,在自定义了数据集里的metainf…...
Linux——基本指令(二)
个人主页:日刷百题 系列专栏:〖C语言小游戏〗〖Linux〗〖数据结构〗 〖C语言〗 🌎欢迎各位→点赞👍收藏⭐️留言📝 写在前面: 紧接上一章,我们在理解接下来的命令之前,…...
渲染农场对工业产品渲染带来的意义与优势?
随着科技的进步,利用精细渲染图来呈现和推广工业设计的创新已成为行业标准。这些图像在产品研发、设计评审和营销阶段起着关键作用,同时对产品最终的成功也产生深远影响。然而,由于产品设计日渐复杂,制作渲染图的任务变得极具挑战…...
产品入门第二讲:Axure产品元件库的使用
📚📚 🏅我是默,一个在CSDN分享笔记的博主。📚📚 🌟在这里,我要推荐给大家我的专栏《Axure》。🎯🎯 🚀无论你是编程小白,还是…...
(第7天)Linux 静默安装单机 Oracle 19C 数据库
Linux 静默安装安装单机 Oracle 19C 数据库(第7天) 很多朋友经常会问,如果生产环境不允许安装 Linux 图形化界面怎么办?是不是有其他的方式来安装部署 Oracle 数据库呢?答案是肯定的! 我们可以通过命令行的方式来静默安装,不调用图形化界面,当然也就没有那么简单了!…...
智能优化算法应用:基于入侵杂草算法3D无线传感器网络(WSN)覆盖优化 - 附代码
智能优化算法应用:基于入侵杂草算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用:基于入侵杂草算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.入侵杂草算法4.实验参数设定5.算法结果6.…...
数据挖掘目标(Kaggle Titanic 生存测试)
import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns1.数据导入 In [2]: train_data pd.read_csv(r../老师文件/train.csv) test_data pd.read_csv(r../老师文件/test.csv) labels pd.read_csv(r../老师文件/label.csv)[Su…...
【Vue】router.push用法实现路由跳转
目录 router.push用法 在Login.vue中 在Register.vue中 上一篇:登录与注册界面的制作 https://blog.csdn.net/m0_67930426/article/details/134895214?spm1001.2014.3001.5502 制作了登录与注册界面,并介绍了相关表单元素即属性的用法 在登录页面…...
设计原则 | 接口隔离原则
一、接口隔离原则 1、原理 客户端不应该依赖它不需要的接口,即一个类对另一个类的依赖应该建立在最小的接口上。如果强迫客户端依赖于那些它们不使用的接口,那么客户端就面临着这个未使用的接口的改变所带来的变更,这无意间导致了客户程序之…...
maui 调用文心一言开发的聊天APP 3
主要是对代码进行了优化 上一个版本写死了帐号跟密码 ,这一个帐本有户可以直接设置对相关的key以及secret如果设置错时,在聊天中也会返回提示。注册帐号时同时也设置了key及secrete升级到了net.8.0导出APK,上一个版本是导出abb.解决了变型问…...
鸿蒙开发 - ohpm安装第三方库
前端开发难免使用第三方库,鸿蒙亦是如此,在使用 DevEco Studio 开发工具时,如何引入第三方库呢?操作步骤如下,假设你使用的是MacOS,假设你已经创建了了一个项目: 一、配置 HTTP Proxy 在打开了…...
[C++] new和delete
使用new时调用构造函数使用delete时调用析构函数 构造函数 使用new动态分配内存时,如果分配的是基本类型的内存,则不会调用构造函数。如果分配的是自定义类型的内存,则会调用构造函数进行对象的初始化。 例如: int* pInt new…...
OpenVINS学习2——VIRAL数据集eee01.bag运行
前言 周末休息了两天,接着做上周五那个VIRAL数据集没有运行成功的工作。现在的最新OpenVINS需要重新写配置文件,不像之前那样都写在launch里,因此需要根据数据集情况配置好estimator_config.yaml还有两个标定参数文件。 VIRAL数据集 VIRAL…...
jemeter,断言:响应断言、Json断言
一、响应断言 接口A请求正常返回值如下: {"status": 10013, "message": "user sign timeout"} 在该接口下创建【响应断言】元件,配置如下: 若断言成功,则查看结果树的接口显示绿色,若…...
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
本文为博主的vue实战小项目系列中的第七篇,很适合后端或者才入门的小伙伴看,一个前端项目从0到1的保姆级教学。前面的内容: 【vue实战项目】通用管理系统:登录页-CSDN博客 【vue实战项目】通用管理系统:封装token操作…...
基于FPGA的视频接口之高速IO(光纤)
简介 对于高速IO口配置光纤,现在目前大部分开发板都有配置,且也有说明,在此根据自己的工作经验以及对于各开发板的说明归纳 通过高速IO接口,以及硬件配置,可以实现对于光纤的收发功能,由于GTX的速率在500Mbs到10Gbps之间,但通道高速io可配置光纤10G硬件,物理通完成,则…...
HTML实现页面
<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>工商银行电子汇款单</title> </head> &…...
回归预测 | MATLAB实现IWOA-LSTM改进鲸鱼算法算法优化长短期记忆神经网络的数据回归预测(多指标,多图)
回归预测 | MATLAB实现IWOA-LSTM改进鲸鱼算法算法优化长短期记忆神经网络的数据回归预测(多指标,多图) 目录 回归预测 | MATLAB实现IWOA-LSTM改进鲸鱼算法算法优化长短期记忆神经网络的数据回归预测(多指标,多图&#…...
鸿蒙开发之状态管理@State
1、视图数据双向绑定 鸿蒙开发采用的声明式UI,利用状态驱动UI的更新。其中State被称作装饰器,是一种状态管理的方式。 状态:指的是被装饰器装饰的驱动视图更新的数据。 视图:是指用户看到的UI渲染出来的界面。 之所以成为双向…...
7.4.分块查找
一.分块查找的算法思想: 1.实例: 以上述图片的顺序表为例, 该顺序表的数据元素从整体来看是乱序的,但如果把这些数据元素分成一块一块的小区间, 第一个区间[0,1]索引上的数据元素都是小于等于10的, 第二…...
五年级数学知识边界总结思考-下册
目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解:由来、作用与意义**一、知识点核心内容****二、知识点的由来:从生活实践到数学抽象****三、知识的作用:解决实际问题的工具****四、学习的意义:培养核心素养…...
Keil 中设置 STM32 Flash 和 RAM 地址详解
文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...
【2025年】解决Burpsuite抓不到https包的问题
环境:windows11 burpsuite:2025.5 在抓取https网站时,burpsuite抓取不到https数据包,只显示: 解决该问题只需如下三个步骤: 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...
linux 下常用变更-8
1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行,YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID: YW3…...
【JavaSE】绘图与事件入门学习笔记
-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角,以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向,距离坐标原点x个像素;第二个是y坐标,表示当前位置为垂直方向,距离坐标原点y个像素。 坐标体系-像素 …...
Typeerror: cannot read properties of undefined (reading ‘XXX‘)
最近需要在离线机器上运行软件,所以得把软件用docker打包起来,大部分功能都没问题,出了一个奇怪的事情。同样的代码,在本机上用vscode可以运行起来,但是打包之后在docker里出现了问题。使用的是dialog组件,…...
算法岗面试经验分享-大模型篇
文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer (1)资源 论文&a…...
安宝特案例丨Vuzix AR智能眼镜集成专业软件,助力卢森堡医院药房转型,赢得辉瑞创新奖
在Vuzix M400 AR智能眼镜的助力下,卢森堡罗伯特舒曼医院(the Robert Schuman Hospitals, HRS)凭借在无菌制剂生产流程中引入增强现实技术(AR)创新项目,荣获了2024年6月7日由卢森堡医院药剂师协会࿰…...
uniapp手机号一键登录保姆级教程(包含前端和后端)
目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号(第三种)后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...
