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


Posted in Javascript onAugust 22, 2018

鼠标移入添加class样式

HTML

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

vue鼠标移入添加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>

JS

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

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

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";
   }
},

拓展知识:vue实现鼠标移入移出事件

如下所示:

<div class="index_tableTitle clearfix" v-for="(item,index) in table_tit">
     <div class="indexItem">
      <span :title="item.name">{{item.name}}</span>
      <span class="mypor">
       <i class="icon" @mouseenter="enter(index)" @mouseleave="leave()"></i>
       <div v-show="seen&&index==current" class="index-show">
        <div class="tip_Wrapinner">{{item.det}}</div>
       </div>
      </span>
     </div>
    </div>
export default {
  data(){
   return{
    seen:false,
    current:0
   }
  },
  methods:{
   enter(index){
    this.seen = true;
    this.current = index;
   },
   leave(){
    this.seen = false;
    this.current = null;
   }
  }
 }

以上这篇vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
利用div+jquery自定义滚动条样式的2种方法
Jul 18 Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 Javascript
Bootstrap轮播图的使用和理解4
Dec 14 Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 Javascript
Vue之Watcher源码解析(2)
Jul 19 Javascript
inner join 内联与left join 左联的实例代码
Sep 18 Javascript
parabola.js抛物线与加入购物车效果的示例代码
Oct 25 Javascript
关于自定义Egg.js的请求级别日志详解
Dec 12 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
Feb 26 Javascript
swiper Scrollbar滚动条组件详解
Sep 08 Javascript
浅谈webpack构建工具配置和常用插件总结
May 11 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 #Javascript
当vue路由变化时,改变导航栏的样式方法
Aug 22 #Javascript
element-ui 设置菜单栏展开的方法
Aug 22 #Javascript
详解vue-cli脚手架中webpack配置方法
Aug 22 #Javascript
element-ui使用导航栏跳转路由的用法详解
Aug 22 #Javascript
详解微信小程序canvas圆角矩形的绘制的方法
Aug 22 #Javascript
解决element UI 自定义传参的问题
Aug 22 #Javascript
You might like
PHP新手上路(三)
2006/10/09 PHP
PHP实现批量生成App各种尺寸Logo
2015/03/19 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
2010/02/24 Javascript
基于jquery的web页面日期格式化插件
2011/11/15 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
JS实现跟随鼠标立体翻转图片的方法
2015/05/04 Javascript
js结合正则实现国内手机号段校验
2015/06/19 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
2015/08/17 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
2016/05/03 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
xmlplus组件设计系列之按钮(2)
2017/04/26 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
Python中的各种装饰器详解
2015/04/11 Python
部署Python的框架下的web app的详细教程
2015/04/30 Python
python3 模拟登录v2ex实例讲解
2017/07/13 Python
Python学习入门之区块链详解
2017/07/25 Python
Python3中bytes类型转换为str类型
2018/09/27 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
python实现猜数字游戏
2020/03/25 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
django form和field具体方法和属性说明
2020/07/09 Python
Python 使用office365邮箱的示例
2020/10/29 Python
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
武汉东之林科技有限公司机试
2013/09/17 面试题
暑假实习求职信范文
2013/09/22 职场文书
物业管理求职自荐信
2013/09/25 职场文书
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
我爱我校演讲稿
2014/05/21 职场文书
Python+tkinter实现高清图片保存
2022/03/13 Python
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA
SQL Server中T-SQL标识符介绍与无排序生成序号的方法
2022/05/25 SQL Server