vue使用el-tag完成添加标签操作
需求:做一个添加标签的功能,点击添加后输入内容后回车可以添加,并且标签可以删除
1.效果

2.主要代码讲解
鼠标按下后触发handleLabel函数,根据回车的keycode判断用户是不是按下的回车键,回车键键值为13,用户按下回车键后把输入的内容添加到标签中,并且清空输入框内容,如果用户输入为空那么会给用户提示。
@keyup.enter.native="handleLabel"
handleLabel(key) {if (key.keyCode == 13) {if (this.labelValue) {this.labelFlag = false;this.label.push({ name: this.labelValue });this.$nextTick(() => (this.labelValue = ''));} else {this.$message.warning('请输入标签内容');}}},
3.完整代码
<!--* @Descripttion: vue使用el-tag完成添加标签操作* @Author: 叫我欧皇大人* @email: 13071200550@163.com* @Date: 2023-12-15
--><template><div class="content-box"><div class="container"><el-tag v-for="(item, index) in label" :key="index" closable @close="label.splice(index, 1)" style="margin: 0 10px">{{item.name}}</el-tag><el-inputstyle="width: 150px"placeholder="请输入标签"size="small"clearablev-model="labelValue"@keyup.enter.native="handleLabel"v-if="labelFlag == true"></el-input><el-button v-else type="primary" size="small" icon="el-icon-plus" @click="addLabel()">添加标签</el-button></div></div>
</template><script>
export default {data() {return {label: [{ name: '前端' }],labelValue: '',labelFlag: false};},mounted() {},methods: {handleLabel(key) {if (key.keyCode == 13) {if (this.labelValue) {this.labelFlag = false;this.label.push({ name: this.labelValue });this.$nextTick(() => (this.labelValue = ''));} else {this.$message.warning('请输入标签内容');}}},addLabel() {this.labelFlag = true;}}
};
</script><style lang="scss" scoped>
.content-box {.container {// height: 400px;display: flex;}
}
.el-select {width: 80px;
}
</style>
文章到此结束,希望对你有所帮助~~
相关文章:
vue使用el-tag完成添加标签操作
需求:做一个添加标签的功能,点击添加后输入内容后回车可以添加,并且标签可以删除 1.效果 2.主要代码讲解 鼠标按下后触发handleLabel函数,根据回车的keycode判断用户是不是按下的回车键,回车键键值为13,用…...
ACM-MM2023 DITN详解:一个部署友好的超分Transformer
目录 1. Introduction2. Method2.1. Overview2.2. UFONE2.3 真实场景下的部署优化 3. 结果 Paper: Unfolding Once is Enough: A Deployment-Friendly Transformer Unit for Super-Resolution Code: https://github.com/yongliuy/DITN 1. Introduction CNN做超分的缺点 由于卷…...
STM32超声波——HC_SR04
文章目录 一.超声波图片二.时序图三.超声波流程四.单位换算五.取余计算六.换算距离七.超声波代码 一.超声波图片 测量距离:2cm——400cm 二.时序图 (1).以下时序图要先提供一个至少10us的脉冲触发信号,告诉单片机我准备好了,然后该超声波…...
[Excel] vlookup函数
VLOOKUP用法 VLOOKUP(lookup_value, table_array, col_index_num, [range_lookup])其中: lookup_value是你要查找的值table_array是你要在其中进行查找的表格区域col_index_num是你要返回的在table_array中列索引号range_lookup是一个可选参数,用于指定…...
Python入门第5篇(爬虫相关)
目录 爬虫初步说明 html相关基础 urllib之读取网页内容 http相关基础 requests之webapi调用 爬虫初步说明 爬虫,一句话来说,即模拟浏览器爬取一些内容,如自动下载音乐、电影、图片这种的 具体可能是直接访问网页进行解析,也…...
单元测试二(实验)-云计算2023.12-云南农业大学
1、实践系列课《深入浅出Docker应用》 https://developeraliyun.com/adc/scenarioSeries/713c370e605e4f1fa7be903b80a53556?spma2c6h.27088027.devcloud-scenarioSeriesList.13.5bb75b8aZHOM2w 容器镜像的制作实验要求 创建Dockerfile文件: FROM ubuntu:latest WORKDIR data…...
Axure动态面板的使用以及示例分享
目录 一. 什么是动态面板 二. 动态面板教程——以轮播图为例 2.1 创建动态面板 2.2 动态面板自适应大小 2.3 重复状态,将图片导入 2.4 添加交互事件——图片切换 2.5 效果展示 三. 多方式登录示例展示 四. 后台主界面左侧菜单栏示例展示 一. 什么是动态面板…...
容斥原理的并
文章目录 简介AcWing 890. 能被整除的数思路解析CODE 简介 推荐题解:https://www.acwing.com/solution/content/126553/ 画了图,清晰易懂,懒得打字了。 总之就是以下公式: S S 1 S 2 S 3 − S 1 ∩ S 2 − S 1 ∩ S 3 − S 2 …...
JavaSE第7篇:封装
文章目录 一、封装1、好处:2、使用 二、四种权限修饰符三、构造器1、作用2、说明3、属性赋值的过程 一、封装 封装就是将类的属性私有化,提供公有的方法访问私有属性 不对外暴露打的私有的方法 单例模式 1、好处: 1.只能通过规定的方法来访问数据 2.隐藏类的实例细节,方便…...
mysql数据库相关知识【MYSQL】
mysql数据库相关知识【MYSQL】 一. 库1.1 登录数据库管理系统1.2 什么是数据库1.2.1 mysqld与mysql 1.3 编码集和校验集1.3.1 什么是编码集和校验集1.3.2 查看库对应的编码集和校验集1.3.3 用指定的编码集和校验集 1.4 库的操作 一. 库 1.1 登录数据库管理系统 这个算是第一个…...
android studio 创建按钮项目
1)、新建一个empty activity项目,切换到project视图: 2)、修改app\src\main\res\layout\activity_main.xml文件,修改后如下: <?xml version"1.0" encoding"utf-8"?> <andr…...
gitee提交代码步骤介绍(含git环境搭建)
1、gitee官网地址 https://gitee.com; 2、Windows中安装git环境 参考博客:《Windows中安装Git软件和TortoiseGit软件》; 3、设置用户名和密码 这里的用户名和密码就是登录gitee网站的用户名和密码如果设置错误,可以在Windows系统的“凭据管理…...
【MyBatis-Plus】常用的插件介绍(乐观锁、逻辑删除、分页)
🥳🥳Welcome Huihuis Code World ! !🥳🥳 接下来看看由辉辉所写的关于MyBatis-Plus的相关操作吧 目录 🥳🥳Welcome Huihuis Code World ! !🥳🥳 一.为什么要使用MyBatis-Plus中的插…...
DApp测试网络Ganache本地部署并实现远程连接
文章目录 前言1. 安装Ganache2. 安装cpolar3. 创建公网地址4. 公网访问连接5. 固定公网地址 前言 Ganache 是DApp的测试网络,提供图形化界面,log日志等;智能合约部署时需要连接测试网络。 Ganache 是一个运行在本地测试的网络,通过结合cpol…...
好用的硬盘分区工具,傲梅分区助手 V10.2
傲梅分区助手软件可以帮助用户在硬盘上创建、调整、合并、删除分区,以及管理磁盘空间等操作。它可以帮助你进行硬盘无损分区操作。 支持系统 目前这款软件支持 Windows 7、Windows 8、Windows 10、Windows 11 等个人系统,还支持 Windows 2012/2016/2019…...
【华为鸿蒙系统学习】- HarmonyOS4.0开发|自学篇
🌈个人主页: Aileen_0v0 🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 💫个人格言:"没有罗马,那就自己创造罗马~" 目录 HarmonyOS 4.0 技术介绍: HarmonyOS三大特征: 1.实现硬件互助&#…...
Qt图像处理-Qt中配置OpenCV打开本地图片
本文讲解Qt中配置OpenCV过程并用实例展示如何使用OpenCV打开图片(windows环境下) 一、下载OpenCv 本文使用版本OpenCV-MinGW-Build-OpenCV-3.4.5 下载地址: https://codeload.github.com/huihut/OpenCV-MinGW-Build/zip/refs/heads/OpenCV-3.4.5 点击Code-local-Downlo…...
HTML中RGB颜色表示法和RGBA颜色表示法
Hi i,m JinXiang ⭐ 前言 ⭐ 本篇文章主要介绍HTML中RGB颜色表示法和RGBA颜色表示法以及部分理论知识 🍉欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁 🍉博主收将持续更新学习记录获,友友们有任何问题可以…...
Openwrt源码下载出现“The remote end hung up unexpected”
最近项目原因需要下载openwrt21.02版本源码,花费了很多时间,找到正确方法后,发现可以节省很多时间,记录下过程,方便自己,可能方便他人。 一.问题阐述 openwrt21.02下载链接如下: git clone -…...
Spring定时任务动态更改(增、删、改)Cron表达式方案实例详解
Spring定时任务动态更改(增、删、改)Cron表达式方案实例详解 最近在做一个需求,用户可以在平台上配置任务计划数据(就是任务的执行和描述的相关信息,包括任务参数、cron表达式),配置后…...
OpenClaw轻量化方案实测:nanobot镜像性能与成本分析
OpenClaw轻量化方案实测:nanobot镜像性能与成本分析 1. 为什么需要轻量化OpenClaw方案 第一次听说OpenClaw时,我就被它的自动化能力吸引了——能让AI像人类一样操作我的电脑,完成各种重复性工作。但当我真正尝试在本地部署标准版OpenClaw时…...
FedProto:跨异构客户端的原型联邦学习实践指南
1. 从零理解FedProto的核心思想 第一次听说FedProto时,我正被一个医疗影像分析项目搞得焦头烂额。五家医院的数据就像五个方言区——同样的病症在CT影像上呈现的特征分布天差地别。传统联邦学习就像让这些医院用各自的方言写报告,再强行翻译成标准语&…...
如何通过Superalgos教育模块快速掌握算法交易:新手入门完整指南
如何通过Superalgos教育模块快速掌握算法交易:新手入门完整指南 【免费下载链接】Superalgos Superalgos/Superalgos: 是一个开源的分布式社交网络分析和数据挖掘平台。适合对大数据分析、机器学习、区块链以及分布式系统有兴趣的开发者。 项目地址: https://gitc…...
Vue项目里用Frappe-Gantt 0.6.1做项目管理甘特图,我踩过的坑都在这了
Vue项目中集成Frappe-Gantt的避坑指南与工程化实践 在最近的一个敏捷开发项目中,我们需要为产品团队提供一个直观的任务进度管理工具。经过几轮技术选型,最终选择了Frappe-Gantt 0.6.1作为基础组件。这个选择并非一帆风顺——从最初的简单集成到最终形成…...
医疗陪护管理系统:信息化管理在医院的应用
博主介绍: 所有项目都配有从入门到精通的安装教程,可二开,提供核心代码讲解,项目指导。 项目配有对应开发文档、解析等 项目都录了发布和功能操作演示视频; 项目的界面和功能都可以定制,包安装运行…...
学术风控新范式:陌讯 AIGC 检测论文 AI 代写识别技术详解
摘要:随着生成式人工智能(AIGC)技术的爆发式迭代,GPT-4、文心一言等大模型已能生成逻辑连贯、格式规范的学术论文,AI代写、AI润色过度等学术不端行为呈现隐蔽化、规模化趋势,传统查重工具难以应对这一新型学…...
WWW-万维网
万维网的概念与组成结构万维网(World Wide Web,WWW)是一个分布式的信息存储空间,在这个空间中:一个事物被称为一样 “资源”,并由一个全域 “统一资源定位符”(URL)标识。这些资源通…...
Matlab实战:5步搞定微电网源储荷协调调度(附完整CPLEX调用代码)
Matlab实战:微电网源储荷协调调度的5个工程化技巧 微电网调度是新能源时代的核心技术难题之一。面对风光发电的波动性和负荷需求的多变性,如何实现源、储、荷三者的动态平衡,成为电力工程师们每天都要应对的挑战。不同于学术论文中复杂的理论…...
避坑指南:Prescan8.5安装常见报错解决方案(含MATLAB集成配置)
Prescan8.5安装避坑指南:7类典型报错与MATLAB集成深度解析 当仿真工程师第一次打开Prescan8.5安装包时,很少有人能预料到接下来可能遭遇的"技术迷宫"。作为自动驾驶仿真领域的重要工具,Prescan的安装过程就像它的功能一样复杂——从…...
Wan2.2-I2V-A14B文生视频入门必看:WebUI可视化操作+命令行示例详解
Wan2.2-I2V-A14B文生视频入门必看:WebUI可视化操作命令行示例详解 1. 快速了解Wan2.2-I2V-A14B Wan2.2-I2V-A14B是一款强大的文生视频模型,能够根据文本描述生成高质量视频内容。这个私有部署镜像专为RTX 4090D 24GB显存显卡优化,内置完整运…...
