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

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

創(chuàng)新互聯(lián)擁有十載的建站服務(wù)經(jīng)驗(yàn)，在此期間，我們發(fā)現(xiàn)較多的客戶在挑選建站服務(wù)商前都非常的猶豫。主要問(wèn)題集中：在無(wú)法預(yù)知自己的網(wǎng)站呈現(xiàn)的效果是什么樣的？也無(wú)法判斷選擇的服務(wù)商設(shè)計(jì)出來(lái)的網(wǎng)頁(yè)效果自己是否會(huì)滿意？創(chuàng)新互聯(lián)業(yè)務(wù)涵蓋了互聯(lián)網(wǎng)平臺(tái)網(wǎng)站建設(shè)、移動(dòng)平臺(tái)網(wǎng)站制作、網(wǎng)絡(luò)推廣、專業(yè)公司等服務(wù)。創(chuàng)新互聯(lián)網(wǎng)站開(kāi)發(fā)公司本著不拘一格的網(wǎng)站視覺(jué)設(shè)計(jì)和網(wǎng)站開(kāi)發(fā)技術(shù)相結(jié)合，為企業(yè)做網(wǎng)站提供成熟的網(wǎng)站設(shè)計(jì)方案。

開(kāi)始在網(wǎng)上找了許多辦法發(fā)現(xiàn)不是太好用，最后找到一個(gè)發(fā)現(xiàn)還是不錯(cuò)的，記錄一下

html：

    

     
{{guigeName}}
     
規(guī)格
     

      {{value.guige_name}}
     
     
口味
     

      {{value.guige_name}}
     
    
   

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ì)創(chuàng)新互聯(lián)網(wǎng)站的支持！