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 相关文章推荐
JavaScript 未结束的字符串常量常见解决方法
Jan 24 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
Oct 29 Javascript
jQuery之ajax删除详解
Feb 27 Javascript
JavaScript数组Array对象增加和删除元素方法总结
Jan 20 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
Aug 15 Javascript
jQuery获取当前点击的对象元素(实现代码)
May 19 Javascript
jQuery页面加载初始化的3种方法(推荐)
Jun 02 Javascript
浅谈Angular2 模块懒加载的方法
Oct 04 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
Feb 28 Javascript
Vue的轮播图组件实现方法
Mar 03 Javascript
三种Webpack打包方式(小结)
Sep 19 Javascript
Layui数据表格跳转到指定页的实现方法
Sep 05 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
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
PHP函数utf8转gb2312编码
2006/12/21 PHP
php将csv文件导入到mysql数据库的方法
2014/12/24 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
Javascript图片上传前的本地预览实例
2014/06/16 Javascript
理解jQuery stop()方法
2014/11/21 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
浅析BootStrap Treeview的简单使用
2016/10/12 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
2017/06/02 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
2019/12/19 Javascript
JavaScript console的使用方法实例分析
2020/04/28 Javascript
浅谈pandas中Dataframe的查询方法([], loc, iloc, at, iat, ix)
2018/04/10 Python
对Pandas DataFrame缺失值的查找与填充示例讲解
2018/11/06 Python
Python Pandas分组聚合的实现方法
2019/07/02 Python
浅谈python图片处理Image和skimage的区别
2019/08/04 Python
对python中的装包与解包实例详解
2019/08/24 Python
详解python tkinter模块安装过程
2020/01/06 Python
django序列化时使用外键的真实值操作
2020/07/15 Python
Python常用模块函数代码汇总解析
2020/08/31 Python
用HTML5的canvas实现一个炫酷时钟效果
2016/05/20 HTML / CSS
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
Interflora澳大利亚:同日鲜花速递
2019/06/25 全球购物
编码实现字符串转整型的函数
2012/06/02 面试题
婚庆司仪主持词
2014/03/15 职场文书
电气工程及其自动化专业求职信
2014/06/23 职场文书
运动会加油稿20字
2014/11/15 职场文书
感恩母亲节活动总结
2015/02/10 职场文书
升学宴学生致辞
2015/09/29 职场文书
用python开发一款操作MySQL的小工具
2021/05/12 Python
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python
对讲机的最大通讯距离是多少
2022/02/18 无线电
Vue如何清空对象
2022/03/03 Vue.js