进入某个页面时将VUE中的某个Button按钮设置为选中状态

进入某个页面时将VUE中的某个Button按钮设置为选中状态

我想达到的效果如标题所说,目的是为了表示页面展示的内容是由于该按钮被选择的结果。
解决思路是使用VUE中的mounted()钩子函数,在该函数中调用按钮得到焦点方法、按钮被点击方法。具体代码如下:

按钮代码:

          <div slot="header" class="clearfix">
            <el-button @click="myProcess" ref="click">我的流程</el-button>
            <el-button @click="toDoTask">待办任务</el-button>
            <el-button @click="pendingTask">待签任务</el-button>
            <el-button @click="finishedTask">已办任务</el-button>
            <el-button @click="copyProcess">抄送我的</el-button>
          </div>

钩子函数代码:

  mounted: function () {
    //进入该页面,第一个按钮就获取焦点
    this.$refs.click.$el.focus()
    //进入该页面,第一个按钮就被按下
    this.$refs.click.$el.click()
  },

注意:

由于解决思路是让按钮得到焦点,所以只要在按钮所在页面点击其他地方,该按钮就会失去焦点,从而失去选中状态。但是我的目的就是为了让用户知道,进入该页面时页面展示的内容是由哪个按钮是被选中的结果,后面失去该按钮失去焦点没有太大影响了,因为用户已经知道了。

结果展示

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Redis限流方案

限流简介 限流算法在分布式领域是一个经常被提起的话题&#xff0c;当系统的处理能力有限时&#xff0c;如何阻止计划外的请求继续对系统施压&#xff0c;是一个需要重视的问题。 除了控制流量&#xff0c;限流还有一个应用目的是用于控制用户行为&#xff0c;避免垃圾请求&a…

【echarts】如何制作,横坐标每个日期点如何对应一条竖线的图,以及 markline设置后不生效问题

图的样式如下&#xff1a; 在线演示 每一个日期&#xff0c;对应一条竖线展示。 echarts配置内容&#xff1a; 在线演示 option {xAxis: {type: category,data: [20240601, 20240602, 20240603, 20240604, 20240605, 20240606, 20240607] // X轴数据},yAxis: {type: valu…

Bond 网卡绑定技术学习

前言&#xff1a; 为了实现网卡的高可用性&#xff0c;需要学习一下 Bond技术 1. 概念 Bond&#xff08;也被称为链路聚合、端口绑定或接口绑定&#xff09;是一种网络技术&#xff0c;用于将多个物理网络接口&#xff08;如以太网接口&#xff09;组合成一个逻辑接口。这样做…

今日份动态规划学习

主要只搞了一个这道题&#xff0c;有点摸鱼了今天晚上&#xff0c;也是来小看一下这道题吧01背包完全背包 P1941 [NOIP2014 提高组] 飞扬的小鸟 题意&#xff1a; 这题是说&#xff0c;给我们一个游戏界面&#xff0c;界面的长度为n&#xff08;水平距离&#xff09;&#x…

E: Unable to locate package ros-kinetic-usb-cam

mkdir -p USB/src && cd USB/src catkin_init_workspace git clone https://github.com/bosch-ros-pkg/usb_cam.git cd .. catkin_make source devel/setup.bash echo "source ~/USB/devel/setup.bash" >> ~/.bashrc source ~/.bashrc 编译过程报错&…

Wireshark抓包日常运维实用过滤

0x0 Wireshark 介绍 Wireshark 是一款功能强大的网络分析工具&#xff0c;适用于网络专业人员。它提供了出色的过滤器&#xff0c;您可以轻松放大到您认为可能存在问题的位置。过滤器的主要好处是消除定位流量&#xff0c;并缩小要查找的数据类型。 0x1 根据源 IP 地址过滤主…

Golang | Leetcode Golang题解之第134题加油站

题目&#xff1a; 题解&#xff1a; func canCompleteCircuit(gas []int, cost []int) int {for i, n : 0, len(gas); i < n; {sumOfGas, sumOfCost, cnt : 0, 0, 0for cnt < n {j : (i cnt) % nsumOfGas gas[j]sumOfCost cost[j]if sumOfCost > sumOfGas {break}…

四川古力未来科技抖音小店开创电商新纪元,前景广阔值得期待!

在数字化浪潮汹涌的当下&#xff0c;电商行业正以前所未有的速度蓬勃发展。四川古力未来科技抖音小店&#xff0c;作为这一领域的佼佼者&#xff0c;凭借其独特的经营理念和创新的营销策略&#xff0c;正在开创电商行业的新纪元。本文将深入探讨四川古力未来科技抖音小店的前景…

25 - 销售分析III(高频 SQL 50 题基础版)

25 - 销售分析III -- where 是分组之前筛选数据 -- having 是分组之后筛选数据selectp.product_id,p.product_name fromSales s left join Product p on s.product_idp.product_id group byproduct_id havingmin(sale_date) >"2019-01-01" and max(sale_date)&…

京东商品采集以及应用场景||电商API接口

京东商品采集的步骤和应用场景可以归纳如下&#xff1a; 一、采集步骤 注册账号&#xff1a;首先&#xff0c;需要在京东开放平台注册一个开发者账号。创建应用&#xff1a;登录开放平台后&#xff0c;创建一个应用以获取API密钥和应用凭据。获取权限&#xff1a;根据所需的服…

Java学习【深入探索包装类和泛型】

Java学习【深入探索包装类和泛型】 &#x1f680;包装类获取包装类对象的方式使用valueOf()创建直接赋值 Integer成员方法 &#x1f680;泛型引出泛型泛型类泛型方法泛型接口泛型的继承和通配符泛型的上界 在Java的学习中&#xff0c;包装类和泛型是两个重要的概念&#xff0c;…

JVM基础知识

一、JVM的内存区域划分 一个进程在运行的时候,会向操作系统申请到内存资源,从来存放程序运行的相关数据。 JVM本质上就是一个java进程,在运行的时候也会从操作系统那搞一块内存&#xff0c;供Java代码执行使用。 JVM又把申请的一块内存根据不同的用途划分出了不同区域。 每一…

数据库——多表查询概述

与单表查询不同&#xff0c;多表查询是从多张表中查找数据。例如&#xff1a; select * from user,course; 得到一张有36条数据的表&#xff0c;这是因为12条数据的user表与3条数据的course表进行了笛卡尔积运算&#xff0c;但是在多表查询中&#xff0c;往往需要消除笛卡尔积带…

MySQL 与 PostgreSQL 在 SQL 方面的关键对比二(功能篇)

目录 1 详细示例 1.1自动增量列 1.2 字符串连接 1.3 JSON 支持 2 总结 MySQL 和 PostgreSQL 是两种流行的开源关系数据库管理系统&#xff08;RDBMS&#xff09;。尽管它们在许多方面相似&#xff0c;但在 SQL 语法和功能上存在一些显著差异。 以下SQL语句的执行如果需要开…

YoloV8改进策略:Block篇|MobileNetV4——移动生态系统的通用模型

文章目录 摘要1、引言2、相关工作3、硬件无关的帕累托效率4、通用反向瓶颈5、Mobile MQA6、MNv4模型设计6.1、精炼NAS以增强架构6.2、MNv4模型的优化 7、结果7.1、ImageNet分类 8、增强蒸馏方案9、结论10、致谢A、搜索空间细节B、基准测试方法论C、ImageNet-1k分类任务的训练设…

springboot启动报端口被占用,修改端口还是报被占用,如何处理?

第一种方式&#xff1a; 通过cmd查看是否有程序占用端口 netstat -ano| findstr 端口号 杀死进程 taskkill -f -pid 进程号 如果未看到有程序占用该端口说明不是这个原因 第二种方式&#xff1a; 打开任务管理器 查看是否进程占用对应端口&#xff0c;有就关闭进程 第三种…

视觉SLAM十四讲:从理论到实践(Chapter8:视觉里程计2)

前言 学习笔记&#xff0c;仅供学习&#xff0c;不做商用&#xff0c;如有侵权&#xff0c;联系我删除即可 一、目标 1.理解光流法跟踪特征点的原理。 2.理解直接法是如何估计相机位姿的。 3.实现多层直接法的计算。 特征点法存在缺陷&#xff1a; 二、光流(Optical Flow) …

nodeJS社区新冠人群管理与老人疫苗小程序-计算机毕业设计源码65190

目 录 摘要 1 绪论 1.1背景及意义 1.2国内外研究慨况 1.3B/S体系工作原理 1.4node.js主要功能 2 1.5论文结构与章节安排 3 2 社区新冠人群管理与老人疫苗小程序分析 4 2.1 可行性分析 4 2.2 系统流程分析 4 2.2.1数据增加流程 5 2.3.2数据修改流程 5 2.3.3数据删除流程 5…

【会议征稿,IEEE出版】第六届电子与通信,网络与计算机技术国际学术会议(ECNCT 2024,7月19-21)

第六届电子与通信&#xff0c;网络与计算机技术国际学术会议 &#xff08;ECNCT 2024&#xff09;将于 2024年7月19日-21日 在 中国广州 举办&#xff0c; 为期三天。 会议由广东工业大学自动化学院主办&#xff0c;会议将安排主旨报告&#xff0c;口头报告以及海报展示&#…

人类语言处理nlp部分笔记——二、BERT和它的家族-介绍和微调

参考自李宏毅课程-人类语言处理 二、BERT和它的家族-介绍和微调 1. What is pre-train model 这里所说的pre-train model是输入一串tokens&#xff0c;能够输出一串vectors&#xff0c;且每个vector可以表示对应的语义的模型&#xff0c;这些vectors也被称作为embeddings。以…