vue鼠標(biāo)移入添加class樣式,鼠標(biāo)移出去除樣式(active)實現(xiàn)方法
更新時間：2018年08月22日 15:16:16 作者：小穗子
今天小編就為大家分享一篇vue鼠標(biāo)移入添加class樣式,鼠標(biāo)移出去除樣式(active)實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
鼠標(biāo)移入添加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>
JS
這里除了active這個class需要動態(tài)添加或者減去,其他的皆是移入移出都需要的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實現(xiàn)鼠標(biāo)移入移出事件
如下所示：
<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鼠標(biāo)移入添加class樣式,鼠標(biāo)移出去除樣式(active)實現(xiàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue全局共享數(shù)據(jù)之globalData,vuex,本地存儲的使用
這篇文章主要介紹了Vue全局共享數(shù)據(jù)之globalData,vuex,本地存儲的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue3中watch的詳解,主要包括Vue2使用watch及Vue3使用watch的方法，通過多種情況實例代碼相結(jié)合給大家詳細(xì)講解，需要的朋友可以參考下2022-11-11
這篇文章主要介紹了Vue分頁效果與購物車功能,本文圖文實例相結(jié)合給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
下面小編就為大家分享一篇在vue中實現(xiàn)圖片和文件上傳的示例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue3+TypeScript+printjs實現(xiàn)標(biāo)簽批量打印功能的完整過程
最近在做vue項目時使用到了print-js打印,這里給大家分享下,這篇文章主要給大家介紹了關(guān)于Vue3+TypeScript+printjs實現(xiàn)標(biāo)簽批量打印功能的完整過程,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
Vant是一套輕量、可靠的移動端組件庫,通過Vant可以快速搭建出風(fēng)格統(tǒng)一的頁面,提升開發(fā)效率,下面這篇文章主要給大家介紹了關(guān)于Vant2移動端Vue組件庫問題的相關(guān)資料,需要的朋友可以參考下2023-01-01
基于Vue3+TypeScript的全局對象的注入和使用詳解
這篇文章主要介紹了基于Vue3+TypeScript的全局對象的注入和使用,本篇隨筆主要介紹一下基于Vue3+TypeScript的全局對象的注入和使用，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue設(shè)置全局訪問接口API地址操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
使用vue框架 Ajax獲取數(shù)據(jù)列表并用BootStrap顯示出來
這篇文章主要介紹了使用vue框架 Ajax獲取數(shù)據(jù)列表并用BootStrap顯示出來,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了Vue加載json文件的方法,結(jié)合實例形式分析了vue.js針對json文件的加載及數(shù)據(jù)讀取等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01