vue鼠标移入添加class样式,鼠标移出去除样式(active)

最新推荐文章于 2024-06-18 17:08:14 发布

陈小穗子呀

最新推荐文章于 2024-06-18 17:08:14 发布

阅读量3.1w

点赞数 5

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue 动态添加class

本文链接：https://blog.youkuaiyun.com/ink_if/article/details/79712600

vue 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用JavaScript在鼠标移入元素时动态添加或移除特定Class的方法。通过HTML绑定mouseover和mouseout事件实现对元素Class的动态管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

鼠标移入添加class样式

HTML

HTML绑定事件,加入或者移出class为active

这里写图片描述

<div class="col-lg-3 col-xs-6 paddingLeft com_marginBtm10 choosePlan" v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)">
   流量套餐
</div>

这里除了active这个class需要动态添加或者减去,其他的皆是移入移出都需要的class

这里写图片描述

methods:{
      changeActive($event){
             $event.currentTarget.className="col-lg-3 col-xs-6 paddingLeft com_marginBtm10 choosePlan active";
      },
      removeActive($event){
             $event.currentTarget.className="col-lg-3 col-xs-6 paddingLeft com_marginBtm10 choosePlan";
      }
},