vue v-for实现hover，active的点击、鼠标悬停的效果

最新推荐文章于 2024-08-01 14:25:01 发布

一键写代码

最新推荐文章于 2024-08-01 14:25:01 发布

阅读量1.3w

点赞数 5

分类专栏：前端技术积累

本文链接：https://blog.csdn.net/qq_42991509/article/details/97811644

版权

前端技术积累专栏收录该内容

160 篇文章 9 订阅

订阅专栏

1、在template中：

<div class="link-list">
	<ul>
		<li
		class="link-item"
		:class="{'link-item-active': item.id == activeLinkId,'link-item-hover':index==hoverIndex}"
		v-for="(item,index) in  linkGroupData"
		:key="index"
		@click="switchActiveLink(item)"
		@mouseover="hoverIndex = index"
		@mouseout="hoverIndex = -1">
		{{item.name}}
		</li>
	</ul>
</div>

tips多个class类名，可用连写在{}中，逗号隔开；
2、在data中定义两个索引值：

hoverIndex: -1, // 菜单hover索引
activeLinkId: 0, // 当前激活的菜单id

3、在css中写两个样式：

 .link-item-hover {
        background-color: #f5f7fa;
      }
      .link-item-active {
        // 链接菜单激活样式
        color: #fff;
        background-color: #b3cae4;
      }

参考文章：
https://www.jianshu.com/p/6f841d5a6090