vue-标签选择

效果

选中后

代码

<span

                    :class="[item.beal==true?'p_yx_span span_active ':'span p_yx']"

                    @click="onTagSelect(index)"

                    v-for="(item,index) in tagList"

                    :key="index"

                    >{{item.name}}

                </span>

// 列表值 

tagList:[

            {id: 1, name: 'tag 1',beal:false},

            {id: 2, name: 'tag 2',beal:false},

            {id: 3, name: 'tag 3',beal:false},

            {id: 4, name: 'tag 4',beal:false},

            {id: 5, name: 'tag 5',beal:false},

            {id: 6, name: 'tag 6',beal:false}

        ],

        // 选中值

        tagChooseData:[],

// 标签选择

        onTagSelect(e){

            this.tagList[e].beal = !this.tagList[e].beal;  //点击后改变状态

            if (this.tagList[e].beal == true) {

                this.tagChooseData.push(this.tagList[e].name);   //如果点击后是true那么直接添加

            } else {

                //如果不是true的话说明这个标签已经存在了,那么就要查找然后删除

                var index = this.tagChooseData.map(item => item).indexOf(this.tagList[e].name);

                if (index != -1) {

                this.tagChooseData.splice(index, 1);

                }

            }

        }

样式

.span {

  display: inline-block;

  padding: 0 10px;

  height: 20px;

  line-height: 20px;

  background: rgba(255, 255, 255, 1);

  box-shadow: 0px 1px 4px 0px rgba(141, 141, 141, 0.3);

  border-radius: 4px;

  font-size: 12px;

  font-family: Microsoft YaHei;

  font-weight: 400;

  color: rgba(34, 34, 34, 1);

  margin-left: 10px;

  cursor: pointer;

  min-width: 44px;

  text-align: center;

}

.span_active {

  background: rgba(236, 173, 64, 1);

  color: #fff;

}

.p_yx {

  color: #222;

}

.p_yx_span {

  display: inline-block;

  padding: 0 10px;

  height: 20px;

  line-height: 20px;

  background: rgb(76, 96, 193);

  box-shadow: 0px 1px 4px 0px rgba(141, 141, 141, 0.3);

  border-radius: 4px;

  font-size: 12px;

  font-family: Microsoft YaHei;

  font-weight: 400;

  color: rgba(34, 34, 34, 1);

  margin-left: 10px;

  cursor: pointer;

  min-width: 44px;

  text-align: center;

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/20510.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

R语言ggplot2包绘制世界地图

数据和代码获取&#xff1a;请查看主页个人信息&#xff01;&#xff01;&#xff01; 1. 数据读取与处理 首先&#xff0c;从CSV文件中读取数据&#xff0c;并计算各国每日收入的平均签证成本。 library(tidyverse) ​ df <- read_csv("df.csv") %>% group_…

PostgreSQL基础(六):PostgreSQL基本操作(二)

文章目录 PostgreSQL基本操作(二) 一、字符串类型 二、日期类型 三、

Qt中使用继承时信号槽定义原则

在Qt代码中&#xff0c;当使用继承来创建新的类时&#xff0c;信号与槽的使用需要注意以下几点&#xff1a; 父类的信号与槽&#xff1a;当一个类继承自另一个类时&#xff0c;它继承了父类的所有信号与槽。可以通过connect函数将父类的信号连接到对应的槽函数上。 新类的信号…

基于分步傅立叶数值算法的一维非线性薛定谔方程求解matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于分步傅立叶数值算法的一维非线性薛定谔方程求解matlab仿真. 2.测试软件版本以及运行结果展示 MATLAB2022A版本运行 3.核心程序 ........................…

今天,组长和研发总监吵起来了 ...

插&#xff1a; AI时代&#xff0c;程序员或多或少要了解些人工智能&#xff0c;前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家(前言 – 人工智能教程 ) 坚持不懈&#xff0c;越努力越幸运&#xff0c;大家…

下载HF AutoTrain 模型的配置文件

下载HF AutoTrain 模型的配置文件 一.在huggingface上创建AutoTrain项目二.通过HF用户名和autotrain项目名,拼接以下url,下载模型列表(json格式)到指定目录三.解析上面的json文件、去重、批量下载模型配置文件(权重以外的文件) 一.在huggingface上创建AutoTrain项目 二.通过HF用…

JavaIO详解(磁盘操作、字节操作、字符操作、对象操作、网络操作、NIO)

Java IO 目录 一、概览二、磁盘操作三、字节操作 实现文件复制装饰者模式 四、字符操作 编码与解码String 的编码方式Reader 与 Writer实现逐行输出文本文件的内容 五、对象操作 序列化Serializabletransient 六、网络操作 InetAddressURLSocketsDatagram 七、NIO 流与块通道与…

Flutter中如何让Android的手势导航栏完全透明?

Flutter 开发中 安卓机器都有 像ios 的手势操作栏&#xff0c; 也就是屏幕底下的 那条线。 但这条线默认是有颜色的 &#xff08;像下面这样&#xff09; 一、全屏幕方式 void main() {// 全屏沉浸式SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []…

Vxe UI vxe-upload 上传组件,显示进度条的方法

vxe-upload 上传组件 查看官网 https://vxeui.com 显示进度条很简单&#xff0c;需要后台支持进度就可以了&#xff0c;后台实现逻辑具体可以百度&#xff0c;这里只介绍前端逻辑。 上传附件 相关参数说明&#xff0c;具体可以看文档&#xff1a; multiple 是否允许多选 li…

面向对象实验Java

找了很久的解决方案&#xff0c;所以想记录下 Android Studio 如何让SimpleAdapter显示更新后的数据&#xff0c;以下面这个为例&#xff1a; SimpleAdapter listItemAdapter new SimpleAdapter(this,playerData,R.layout.activity_item,new String[]{"rank",&quo…

JDBC常见异常(4)—No suitable driver found for url

异常代码 表示Java程序在尝试连接到Oracle数据库时&#xff0c;没有找到合适的JDBC驱动程序。 java.sql.SQLException: No suitable driver found for jdbc:oracle:thin:localhost:1521:ORCL异常分析 根据异常的字面意思&#xff0c;大概可以分析原因 这通常是因为驱动程序…

FreeRTOS基础(四):静态创建任务

上一篇博客&#xff0c;我们讲解了FreeRTOS中如何动态创建任务&#xff0c;那么这一讲&#xff0c;我们从实战出发&#xff0c;规范我们在FreeRTOS下的编码风格&#xff0c;掌握静态创建任务的编码风格&#xff0c;达到实战应用&#xff01; 目录 一、空闲任务和空闲任务钩子…

【算法】位运算算法——消失的两个数字(困难)

题解&#xff1a;消失的两个数字(位运算算法) 目录 1.题目2.题解3.示例代码如下4.总结 1.题目 题目链接&#xff1a;LINK 2.题解 本题要求时间复杂度O(N),空间复杂度O(1),分别否了我们 排序遍历 和 哈希数组 的想法。想要在规定时间/空间复杂度内完成本题&#xff0c;需要借…

智密腾讯云直播组建--客户端API简介

客户端API指的是伴随着Demo提供的ZhimiTRTCLiveRoom SDK&#xff0c;常见于(工程目录/utils/ZhimiTRTCLiveRoom/sdk.js)&#xff0c;并且以开放对象的方式重新包装一次对外开放&#xff0c;可参考(工程目录/utils/ZhimiTRTCLiveRoom/index.js)&#xff0c;该包装方式主要是方便…

数据结构05:树与二叉树 习题02[C++]

考研笔记整理&#xff0c;本篇作为二叉树的入门习题&#xff0c;供小伙伴们参考~&#x1f95d;&#x1f95d; 之前的博文链接在此&#xff1a;数据结构05&#xff1a;树与二叉树[C]-CSDN博客~&#x1f95d;&#x1f95d; 第1版&#xff1a;王道书的课后习题~&#x1f9e9;&am…

基于多源土地覆盖产品整合的高精度中国森林覆盖数据集

本数据集是结合多源土地覆盖产品的一致性和互补性&#xff0c;基于无云合成影像并结合随机森林分类模型和多级投票策略生产的一套全国范围的高精度森林覆盖数据产品。该数据产品可以提升我国森林资源监测、林业经营管理、森林碳汇计量评价等方面工作的准确性&#xff0c;为森林…

什么洗地机口碑最好?目前口碑最好的十大洗地机品牌推荐

如今人们的生活节奏越来越快&#xff0c;休闲时间越来越少&#xff0c;下班之后还要腾出时间和精力打扫卫生&#xff0c;委实是耗神的事儿。这个时候&#xff0c;高科技的智能清洁家电产品便起到了重要作用了。洗地机集合扫地、吸尘、洗地为一体的清洁机器&#xff0c;能够快速…

【5】MySQL数据库备份-XtraBackup 安装报错 zstd

XtraBackup 安装报错 zstd 前言解决方案 前言 在 Linux 系统上安装 XtraBackup 过程中&#xff0c;遇到如下的报错&#xff08;… Requires: zstd …&#xff09;&#xff1a; --> Processing Dependency: zstd for package: percona-xtrabackup-80-8.0.35-30.1.el7.x86_…

7款Java 微服务框架

1.微服务的历史 微服务的概念源于 21 世纪初盛行的面向服务架构 (SOA)。然而&#xff0c;“微服务”一词本身直到 2012 年左右才出现&#xff0c;当时它开始在软件架构活动和软件架构博客上被讨论。 微服务的早期先驱包括 Netflix、Amazon 和 eBay 等公司。例如&#xff0c;2…

pytorch-Normalization

目录 1. 为什么Normalization2. Normalization2.1 image Normalization2.2 Batch Normalization 3. Normalization pytorch实现3.1 Normalization标准公式3.2 2d normalization3.3 normalize test 4. 使用normalization的好处 1. 为什么Normalization 下图使用sigmoid激活函数…