017、Vue动态tag标签

文章目录

    • 1、先看效果
    • 2、代码

1、先看效果

在这里插入图片描述

2、代码

<template><div class = "tags"><el-tag size="medium"closable v-for="item,index in tags":key="item.path":effect="item.title==$route.name?'dark':'plain'"@click="goTo(item.path)"@close = "close(index)":disable-transitions="true"><i class="cir" v-show="item.title==$route.name"></i>{{item.title}}</el-tag></div>
</template><script>
import { Tag } from 'element-ui';export default{data(){return {tags:[{title:"layout",path:"/layout",isActive: true,}]}},methods:{goTo(path){this.$router.replace({path: (path == '/' || path == undefined ? '/Index' : path)});},close(index){const name = this.tags[index].title;this.tags.splice(index,1);if(this.tags.length==0) return;//如果关闭当前页,则激活最后一个标签页const path = this.tags[this.tags.length-1].path;if(name===this.$route.name&&this.tags.length!=0){this.$router.replace({path: (path == '/' || path == undefined ? '/Index' : path)});}}},watch:{$route:{immediate:true,handler(val,oldVal){console.log(val);const bool = this.tags.find(item=>{return item.path == val.path;});if(!bool){this.tags.push({title: val.name,path: val.path});}}}}}
</script><style scoped>.tags .el-tag{padding-left: 10px;padding-top: 0px;margin-right: 5px;.cir{width: 8px;height: 8px;margin-right: 4px;background-color: #fff;border-radius: 50%;display: inline-block;}}</style>

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

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

相关文章

【中项】系统集成项目管理工程师-第4章 信息系统架构-4.3应用架构

前言&#xff1a;系统集成项目管理工程师专业&#xff0c;现分享一些教材知识点。觉得文章还不错的喜欢点赞收藏的同时帮忙点点关注。 软考同样是国家人社部和工信部组织的国家级考试&#xff0c;全称为“全国计算机与软件专业技术资格&#xff08;水平&#xff09;考试”&…

安卓系统签名的制作与使用(SignApk.jar)踩坑记录

看到这里的你应该能区分apk签名跟系统签名吧,如果无法区分的请看下面链接 android 应用的证书签名跟系统签名 看过上面的文章应该知道系统签名需要的文件清单大概有哪些 前两个是编译安卓系统时在build目录下,详细目录为 /build/target/product/security 每组签名用途不同&am…

Godot学习笔记2——GDScript变量与函数

目录 一、代码编写界面 二、变量 三、函数 四、变量的类型 Godot使用的编程语言是GDS&#xff0c;语法上与python有些类似。 一、代码编写界面 在新建的Godot项目中&#xff0c;点击“创建根节点”中的“其他节点”&#xff0c;选择“Node”。 点击场景界面右上角的绿色…

ISP代理和双ISP代理:区别和优势

随着互联网技术的不断发展和普及&#xff0c;网络代理服务成为众多用户保护隐私、提高网络性能、增强安全性的重要工具。其中&#xff0c;ISP代理和双ISP代理是两种常见的网络代理服务形式。本文将详细探讨ISP代理和双ISP代理的区别和优势&#xff0c;以便用户更好地了解并选择…

真实测评,霍尼韦尔、希喂、352宠物空气净化器性能对比

在快节奏的社会生活中&#xff0c;人们越来越注重精神需要&#xff0c;许多年轻人纷纷选择拥抱宠物&#xff0c;作为生活中的温馨伴侣。宠物们治愈心灵的同时也要付出一定“代价”&#xff0c;日常养护&#xff0c;如清理猫毛、管理气味以及保持宠物环境的清洁&#xff0c;都是…

开源发票识别InvoiceNet项目Windows部署踩坑记(1)

今天安装在github上的InvoiceNet开源项目&#xff0c;准备对它进行测试&#xff0c;安装过程出现了一些问题&#xff0c;做个记录&#xff0c;给遇到兄弟爬坑。 第一个问题&#xff0c;conda的问题&#xff0c; 这是另外一个包管理器&#xff0c;不仅仅可以管理python的虚拟…

UFO:革新Windows操作系统交互的UI聚焦代理

人工智能咨询培训老师叶梓 转载标明出处 人机交互的便捷性和效率直接影响着我们的工作和生活质量。尽管现代操作系统如Windows提供了丰富的图形用户界面&#xff08;GUI&#xff09;&#xff0c;使得用户能够通过视觉和简单的点击操作来控制计算机&#xff0c;但随着应用程序功…

IP第一次综合实验

一、实验拓扑 二、实验要求 1、R6为ISP&#xff0c;接口IP地址均为公有地址&#xff0c;该设备只能配置地址之后不能冉对其进行任何配置 2、R1-R5为局域网&#xff0c;私有Ip地址192.168.1.0/24&#xff0c;请合理分配 3、R1、82、R4&#xff0c;各有两个环回IP地址;R5,R6各…

Linux、Windows和macOS上使用Telnet

文章目录 LinuxWindowsmacOS 在Linux、Windows和macOS上使用Telnet时&#xff0c;不同的系统有不同的工具和设置方法。以下是在这些系统上使用Telnet的简要说明&#xff1a; Linux 在Linux上&#xff0c;Telnet通常是通过telnet命令来使用的。首先&#xff0c;你需要确保你的系…

Ubuntu 24.04 LTS Noble安装 FileZilla Server

FileZilla Server 是一款使用图形用户界面快速创建 FTP 服务器的软件。它有助于测试需要 FTP 服务器功能的各种项目。虽然早期的 FileZilla FTP 服务器仅适用于 Windows 和 macOS&#xff0c;但现在我们也可以在 Linux&#xff08;例如 Ubuntu 24.04&#xff09;上安装 FileZil…

解决Visual studio内报错信息:MSB8036:找不到 Windows SDK 版本问题

问题描述&#xff1a; 找不到WindowsSDK版本&#xff0c;请安装所需版本的Windows SDK&#xff0c;或者在项目属性页中通过右键单击解决方案并选择“重定解决方案目标”来更改SDK版本。 首先&#xff0c;如果你尝试了以下两种方法&#xff1a; &#xff08;1&#xff09;重新…

43 华三AC登录Web页面

一 无线上WEB页面 1 创建vlan 56 [AC-KongZhi]vlan 56 2 退出 [AC-KongZhi-vlan56]quit 3 进入vlan三层口 配置IP地址 [AC-KongZhi]interface Vlan-interface 56 [AC-KongZhi-Vlan-interface56]ip address 192.168.56.55 24 4 在AC控制器与Host主机的接口上能通关vlan 5…

【人工智能】使用Python的dlib库实现人脸识别技术

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 一、引言二、传统人脸识别技术1. 基于几何特征的方法2. 基于模板匹配的方法3. 基于统计学习的方法 三、深度学习在脸识别中的应用1. 卷积神经网络&#xff08;CNN&#xff09;2. FaceNet和ArcFace 四、使用Python和dlib库实…

56 网络层

本节重点 理解网络层的作用&#xff0c;深入理解IP协议的基本原理 对整个TCP/IP协议有系统的理解 对TCP/IP协议体系下的其他重要协议和技术有一定的了解 目录 前置认识ip协议基本概念协议头格式网段划分特殊的ip地址ip地址的数量限制私有ip和公有ip路由路由表生成算法 在复杂…

【专题】百度萝卜快跑体验:Robotaxi发展现状与展望报告合集PDF分享(附原数据表)

原文链接&#xff1a; https://tecdat.cn/?p37054 百度“萝卜快跑”近期因事故与抵制引发关注&#xff0c;武汉部署超300辆全无人驾驶车。体验显示其安全但策略保守&#xff0c;行驶效率低于人类司机&#xff0c;价格亲民。阅读原文&#xff0c;获取专题报告合集全文&#xf…

力扣高频SQL 50题(基础版)第六题

文章目录 1378. 使用唯一标识码替换员工ID题目说明思路分析实现过程结果截图总结 1378. 使用唯一标识码替换员工ID 题目说明 Employees 表&#xff1a; ---------------------- | Column Name | Type | ---------------------- | id | int | | name | varchar | ------…

PWM再理解(1)

前言 昨天过于劳累&#xff0c;十点睡觉&#xff0c;本来想梳理一下PWM&#xff0c;今天补上。 PWM内涵 PWM全称&#xff1a;Pulse Width Modulation&#xff0c;也就是脉宽调制的意思&#xff0c;字面意思理解就是对脉冲的宽度进行改变。准确就是通过数字输出对模拟电路进行…

python+pyqt开发海康相机数据采集系统

pythonpyqt开发海康相机数据采集系统 pythonpyqt开发海康相机数据采集系统 1 开发软件功能&#xff1a; 支持搜索相机&#xff1a;Gige相机设备和USB相机设备支持两种触发模式&#xff1a;软件触发和编码器触发支持数据采集过程中图像实时保存支持参数调节和实时预览&#xff…

ssh到huawei交换机

import re from netmiko import ConnectHandlerips [ 10.32.5.130, 10.32.5.131, 10.32.5.132, 10.32.5.133, 10.32.5.134, 10.32.5.135, ]for ip in ips:hw_fw {device_type: huawei,host: ip, username: 493031,password: 密码,port: 22 }net_connect ConnectHandler(*…

threejs零基础搭建3D可视化汽车展厅

前置知识(最下面有完整代码) 每个代码都有注释,零基础也能看懂 中文官方文档教程 创建项目 创建空文件夹 执行如下命令初始化package.json文件 npm init -y安装threejs包 yarn add three安装tween.js动画库,用于做动画 tweenjs文档 yarn add @tweenjs/tween.js安装gui调…