700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > vue 列表 萌层 鼠标移入移出_vue鼠标移入添加class样式 鼠标移出去除样式(active)实现方法...

vue 列表 萌层 鼠标移入移出_vue鼠标移入添加class样式 鼠标移出去除样式(active)实现方法...

时间:2023-11-21 19:57:24

相关推荐

vue 列表 萌层 鼠标移入移出_vue鼠标移入添加class样式 鼠标移出去除样式(active)实现方法...

鼠标移入添加class样式

HTML

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

流量套餐

JS

这里除了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";

}

},

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

如下所示:

{{item.name}}

{{item.det}}

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)实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。