vue鼠標移入添加class樣式,鼠標移出去除樣式(active)實現(xiàn)方法
更新時間：2018年08月22日 15:16:16 作者：小穗子
今天小編就為大家分享一篇vue鼠標移入添加class樣式,鼠標移出去除樣式(active)實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
鼠標移入添加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)鼠標移入移出事件
如下所示：
<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)實現(xiàn)方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue-router 源碼之實現(xiàn)一個簡單的 vue-router
這篇文章主要介紹了vue-router 源碼之實現(xiàn)一個簡單的 vue-router，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了vue 項目引入echarts 添加點擊事件操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
我們在使用element-ui的時候經(jīng)常會遇到需要修改組件默認樣式,下面這篇文章主要給大家介紹了關(guān)于element-ui中樣式覆蓋問題的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了Vue Element校驗validate的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了vue中?render?函數(shù)功能與原理,結(jié)合實例形式分析了vue中render函數(shù)的基本功能、原理及相關(guān)操作注意事項,需要的朋友可以參考下2023-06-06
使用VUE和webrtc-streamer實現(xiàn)實時視頻播放(監(jiān)控設(shè)備-rtsp)
WebRTC-streamer是一項使用簡單機制通過WebRTC流式傳輸視頻捕獲設(shè)備和RTSP源的實驗,下面這篇文章主要給大家介紹了關(guān)于如何使用VUE和webrtc-streamer實現(xiàn)實時視頻播放(監(jiān)控設(shè)備-rtsp)的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了在Vue項目中使用snapshot測試的具體使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
Vue?基于?vuedraggable?實現(xiàn)選中、拖拽、排序效果
這篇文章主要介紹了Vue?基于?vuedraggable?實現(xiàn)選中、拖拽、排序效果，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
這篇文章主要為大家詳細介紹了Vue中雙向綁定原理及簡單實現(xiàn)，文中的示例代碼講解詳細，對我們深入了解Vue有一定的幫助，需要的可以參考一下2023-05-05
vue.config.js?是一個可選的配置文件，如果項目的?(和?package.json?同級的)?根目錄中存在這個文件，那么它會被?@vue/cli-service?自動加載，本文重點介紹VUE前端vue.config.js簡介，感興趣的朋友跟隨小編一起看看吧2023-01-01