最近使用vue需要實(shí)現(xiàn)一個(gè)點(diǎn)餐選擇商品規(guī)格的頁(yè)面,需要通過(guò)vue動(dòng)態(tài)的給被點(diǎn)擊的元素添加class名字,使其變色,其他的刪除class。如圖:
開始在網(wǎng)上找了許多辦法發(fā)現(xiàn)不是太好用,最后找到一個(gè)發(fā)現(xiàn)還是不錯(cuò)的,記錄一下
html:
<div class="weui-mask" id="guige"> <div class="guigeBox"> <p class="guigeTitle">{{guigeName}}</p> <p class="guigeP guigeP01">規(guī)格</p> <div class="indexGuiGe"> <span v-for="value,index in guigeList" v-on:click="guige(index)" v-bind:class="{on:index==guigeSpan}">{{value.guige_name}}</span> </div> <p class="guigeP">口味</p> <div class="indexKouwie"> <span v-for="value,index in kouweiList" v-on:click="kouwei(index)" v-bind:class="{on:index==kouweiSpan}">{{value.guige_name}}</span> </div> </div> </div>
script:
var guige=new Vue({ el: '#guige', data:{ guigeSpan:"-1", //控制點(diǎn)亮狀態(tài) -1為默認(rèn)不點(diǎn)亮 kouweiSpan:"-1", //控制點(diǎn)亮狀態(tài) }, methods:{ guige:function(index){ //當(dāng)點(diǎn)擊時(shí)候點(diǎn)亮,同級(jí)的span標(biāo)簽刪除Class this.guigeSpan = index; }, kouwei:function(index){ this.kouweiSpan = index; }, } })
總結(jié)
以上所述是小編給大家介紹的vue.js實(shí)現(xiàn)點(diǎn)擊后動(dòng)態(tài)添加class及刪除同級(jí)class,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com