Vue 鼠标移入移出 样式改变

2023-10-30

<div v-for="(item, index) in 3" :key="index">
  <a @click="goList(index)" @mouseover="getCur(index, item)" :class="curIndex == index ? 'current' : ''">
    <span>{{ item}}</span>
  </a>
</div>
// tab滑动
getCur(a, b) {
  if (a == 0) {
    this.curIndex = 0;
  } else if (a == 1) {
    this.curIndex = 1;
  } else {
    this.curIndex = 2;
  }
},
// tab 点击事件
goList(a) {
  if (a == 0) {
    this.$router.push("******"); 
  } else if (a == 1) {
    this.$router.push("****");
  } else {
    // *********
  }
},

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue 鼠标移入移出 样式改变 的相关文章

  • 【Python算法系列十一】二叉树的3种遍历方式

    二叉树的遍历是指从根结点出发 按照某种次序依次访问二叉树中所有结点 使得每个结点被访问一次且仅被访问一次 遍历二叉树的方法主要分 3 种 先序遍历 中序遍历和后序遍历 先序遍历指最先遍历节点本身 再遍历节点的左子树 最后遍历右子树的遍历方法

随机推荐

  • (一)esp8266透传简单使用

    最近闲的在捣鼓wifi 以太网连接网 不过好像没有那么多时间去研究cc3200 先从封装好的芯片模块开始玩起吧 这几天准备研究下ESP8266 由于手头上是有一个透传的模块 和一个块STM32F4的板子 而且有对应的代码例程 所以先开始研究
  • 华为OD机试 - 服务失效判断(Java)

    题目描述 某系统中有众多服务 每个服务用字符串 只包含字母和数字 长度 lt 10 唯一标识 服务间可能有依赖关系 如A依赖B 则当B故障时导致A也故障 依赖具有传递性 如A依赖B B依赖C 当C故障时导致B故障 也导致A故障 给出所有依赖
  • QT显示图片的四种方法

    QT显示图片的四种方法 原文地址 https blog csdn net flowerspring article details 113307194 1 Qt 设置背景图片的三种方式 setAutoFillBackground http
  • Error invoking remote method ‘docker-start-container‘: Error: (HTTP code 500) server error - Ports a

    文章目录 一 Error invoking remote method docker start container Error HTTP code 500 server error Ports are not available list
  • web到底是什么意思,web站点的创建方法

    web到底是什么意思 先来看看两个名词 一 超文本 hypertext 一种全局性的信息结构 它将文档中的不同部分通过关键字建立链接 使信息得以用交互方式搜索 它是超级文本的简称 二 超媒体 hypermedia 简介 WWW WorldW
  • HTML基础

    超文本标记语言 英语 HyperText Markup Language 简称 HTML 是一种用来结构化 Web 网页及其内容的标记语言 网页内容可以是 一组段落 一个重点信息列表 也可以含有图片和数据表 正如标题所示 本文将对 HTML
  • 多处使用laydate,上方限制下方时间范围

    多处使用laydate 上方限制下方时间范围 前言 需求是上方laydate开始与结束时间是一个范围 选定后 下方添加出的每一行数据中 都会调用laydate 但是范围不能超过上方 默认和上面时间一致 当点击上方切换时间时 下方时间同步更换
  • spark 统计线上日志ip分组统计

    线上日志格式如下 每次访问都会记录ip 标记红色部分 获取某一行看看怎么解析 2017 12 01 09 57 11 970 http nio 8082 exec 2 INFO com fullshare common aop Contro
  • 以太网,IP,TCP,UDP数据包分析

    转自 http www cnblogs com feitian629 archive 2012 11 16 2774065 html 1 ISO开放系统有以下几层 7 应用层 6 表示层 5 会话层 4 传输层 3 网络层 2 数据链路层
  • 【无标题】DVWA通关攻略(持续更新)

    文章目录 DVWA通关攻略 持续更新 sql注入 级别 LOW sql盲注 级别 LOW DVWA通关攻略 持续更新 sql注入 级别 LOW 1 输入 进行试探 若提示语法错误 则也许有漏洞 2 试探列数 888 or 1 1 order
  • LeetCode:387(Python)—— 字符串中的第一个唯一字符(简单)

    字符串中的第一个唯一字符 概述 给定一个字符串 s 找到 它的第一个不重复的字符 并返回它的索引 如果不存在 则返回 1 输入 s leetcode 输出 0 输入 s loveleetcode 输出 2 输入 s aabb 输出 1 方法
  • 云服务器和虚拟主机区别

    虚拟主机和云服务器是常见的网站托管方式 都可以让网站在互联网上运行 但是它们有很大的区别 本文将从使用场景 性能 安全性 灵活性 价格等方面详细介绍虚拟主机和云服务器的区别 一 使用场景 虚拟主机是一个物理服务器通过虚拟化技术划分成多个虚拟
  • 数据结构 C 代码14:图的遍历

    一 图的遍历 从图中某一顶点出发 并系统地访问完图中的所有顶点 且都恰好访问一次的运算操作就被称作 图的遍历 图的遍历理解起来并不是很难 可以分开理解 遍 意为全部 历 意为经历 经过 合起来就是 全部顶点都经过一遍 图的遍历方式分为两种
  • Redis高频面试笔记:java版本号比较算法

    1 三重心智模型 先给大家科普一个概念 三重心智模型 认知科学家斯坦诺维奇 将人的心智模式 分成了三个部分 第一层是自主心智 自主心智是我们通过进化与内隐学习获得 比如 我们看到蛇就会害怕 情绪反应 以及文气 车感 网感这些说不清道不明的内
  • linux7怎么查看rsync状态,linux – Rsync显示单个文件的进度

    这可能就是你所追求的 rsync avvz times stats checksum human readable acls itemize changes progress out format t i Last Modified M b
  • 图解通信原理与案例分析-6:基于离散字符的RS232串口数字通信--收发双方独立预设置同步时钟

    前言 RS 232标准接口是计算机常用的串行通信接口标准之一 虽然比较简单与成熟 但对于理解通信原理的基本流程和框架 核心的概念有基础性帮助作用 本文将从通信原理的角度 解析RS232串口通信过程中的每个环节 包括硬件和软件 在信源和信宿之
  • [Unity] Unity的lua项目中模拟每帧运行一次的协程

    游戏中 我们经常需要把一些大量计算或一些需要持续逐帧运算的步骤交给协程处理 习惯了Monobehaviour中使用协程来完成这类操作的我们 然而 很多Unity项目在选择热更新方案的时候 基本都会选择使用slua ulua等lua解决方案
  • 怎么理解面向对象编程

    怎么理解面向对象编程 百度百科的说法 维基百科的说法 我的理解 面向对象编程的特性 封装 继承 多态 五大基本原则 SPR OCP LSP DIP ISP 单一职责原则SRP Single Responsibility Principle
  • 40个Python入门小程序

    有不少同学学完Python后仍然很难将其灵活运用 我整理 37 个Python入门的小程序 在实践中应用Python会有事半功倍的效果 例子1 华氏温度转换为摄氏温度 华氏温度转摄氏温度的公式 C F 32 1 8 本例考察Python的加
  • Vue 鼠标移入移出 样式改变

    div a span item span a div tab滑动 getCur a b if a 0 this curIndex 0 else if a 1 this curIndex 1 else this curIndex 2