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 相关文章推荐
改版了网上的一个js操作userdata
Apr 27 Javascript
从阿里妈妈发现的几个不错的表单验证函数
Sep 21 Javascript
使用js+jquery实现无限极联动
May 23 Javascript
javascript下拉列表中显示树形菜单的实现方法
Nov 17 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
Feb 18 Javascript
jQuery弹出窗口打开链接的实现代码
Dec 24 Javascript
微信小程序 密码输入(源码下载)
Jun 27 Javascript
javascript基于定时器实现进度条功能实例
Oct 13 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
Mar 05 Javascript
vue组件间的参数传递实例详解
Apr 26 Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 Javascript
原生JavaScript实现刮刮乐
Sep 29 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版(2)
2006/10/09 PHP
yii框架表单模型使用及以数组形式提交表单数据示例
2014/04/30 PHP
php函数mkdir实现递归创建层级目录
2016/10/27 PHP
PHP表单验证内容是否为空的实现代码
2016/11/14 PHP
js的with语句使用方法
2007/09/21 Javascript
解读IE和firefox下JScript和HREF的执行顺序
2008/01/12 Javascript
javascript获得服务器端控件的ID的实现代码
2011/12/28 Javascript
javascript实现的一个带下拉框功能的文本框
2014/05/08 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
jQuery中:reset选择器用法实例
2015/01/04 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
2015/08/10 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
详解vue-loader在项目中是如何配置的
2018/06/04 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python增量循环删除MySQL表数据的方法
2016/09/23 Python
Python机器学习之决策树算法
2017/12/22 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
python中的时区问题
2021/01/14 Python
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
淘宝中秋节活动方案
2014/01/31 职场文书
弘扬职业精神演讲稿
2014/03/20 职场文书
作风建设演讲稿
2014/05/23 职场文书
有关环保的标语
2014/06/13 职场文书
家长会标语
2014/06/24 职场文书
大四优秀党员个人民主评议
2014/09/19 职场文书
党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
师德师风事迹材料
2014/12/20 职场文书
财政局个人总结
2015/03/04 职场文书
小学中队活动总结
2015/05/11 职场文书
离婚纠纷代理词
2015/05/23 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python
PYTHON 使用 Pandas 删除某列指定值所在的行
2022/04/28 Python