溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

vue.js實(shí)現(xiàn)點(diǎn)擊后動(dòng)態(tài)添加class及刪除同級(jí)class的實(shí)現(xiàn)代碼

發(fā)布時(shí)間：2020-10-05 06:07:53 來(lái)源：腳本之家 閱讀：648 作者：我的益達(dá) 欄目：web開(kāi)發(fā)

最近使用vue需要實(shí)現(xiàn)一個(gè)點(diǎn)餐選擇商品規(guī)格的頁(yè)面，需要通過(guò)vue動(dòng)態(tài)的給被點(diǎn)擊的元素添加class名字，使其變色，其他的刪除class。如圖：

vue.js實(shí)現(xiàn)點(diǎn)擊后動(dòng)態(tài)添加class及刪除同級(jí)class的實(shí)現(xiàn)代碼

開(kāi)始在網(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)站的支持！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手