這篇文章將為大家詳細(xì)講解有關(guān)vue中如何實現(xiàn)鼠標(biāo)移入添加class樣式,鼠標(biāo)移出去除樣式,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
成都創(chuàng)新互聯(lián)公司堅持“要么做到,要么別承諾”的工作理念,服務(wù)領(lǐng)域包括:網(wǎng)站設(shè)計制作、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù),滿足客戶于互聯(lián)網(wǎng)時代的易門網(wǎng)站設(shè)計、移動媒體設(shè)計的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴!
鼠標(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; } } }
關(guān)于“vue中如何實現(xiàn)鼠標(biāo)移入添加class樣式,鼠標(biāo)移出去除樣式”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
網(wǎng)站名稱:vue中如何實現(xiàn)鼠標(biāo)移入添加class樣式,鼠標(biāo)移出去除樣式
文章網(wǎng)址:http://muchs.cn/article8/ipgcip.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站營銷、搜索引擎優(yōu)化、Google、做網(wǎng)站、定制網(wǎng)站、網(wǎng)站收錄
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)