快捷導(dǎo)航

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

更新時(shí)間：2018年04月04日 09:45:03 作者：我的益達(dá)

這篇文章主要介紹了vue.js實(shí)現(xiàn)點(diǎn)擊后動(dòng)態(tài)添加class及刪除同級(jí)class的相關(guān)資料,需要的朋友可以參考下

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

開(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)站的支持！

您可能感興趣的文章:

相關(guān)文章

如何在vue3.0+中使用tinymce及實(shí)現(xiàn)多圖上傳文件上傳公式編輯功能
本文給大家分享tinymce編輯器如何在vue3.0+中使用tinymce及實(shí)現(xiàn)多圖上傳文件上傳公式編輯功能，tinymce安裝方法文中也給大家詳細(xì)介紹了，對(duì)vue tinymce實(shí)現(xiàn)上傳公式編輯相關(guān)知識(shí)感興趣的朋友跟隨小編一起學(xué)習(xí)下吧
2021-05-05
Vue入口文件index.html緩存的問(wèn)題及解決
這篇文章主要介紹了Vue入口文件index.html緩存的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
Vue?3.0?v-for中的Ref數(shù)組用法小結(jié)
在?Vue?2?中,在?v-for?里使用的?ref?attribute會(huì)用ref?數(shù)組填充相應(yīng)的?$refs?property,本文給大家介紹Vue?3.0?v-for中的Ref數(shù)組的相關(guān)知識(shí),感興趣的朋友一起看看吧
2023-12-12
vue獲取input輸入值的問(wèn)題解決辦法
這篇文章主要介紹了vue獲取input輸入值的問(wèn)題解決辦法的相關(guān)資料,希望通過(guò)本文能幫助到大家，讓大家掌握這樣的問(wèn)題，需要的朋友可以參考下
2017-10-10
cdn模式下vue的基本用法詳解
這篇文章主要介紹了cdn模式下vue的基本用法，本文通過(guò)圖文并茂的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-10-10
Vue3使用Vue Router實(shí)現(xiàn)前端路由控制
在現(xiàn)代Web應(yīng)用中,前端路由控制是非常重要的一部分,它可以幫助我們將不同的頁(yè)面內(nèi)容展示給用戶,同時(shí)保持用戶在瀏覽不同頁(yè)面時(shí)的連貫性,本文將介紹如何使用Vue Router來(lái)實(shí)現(xiàn)前端路由控制,需要的朋友可以參考下
2024-10-10
Vue?Electron實(shí)現(xiàn)輸入法自動(dòng)刷字?jǐn)?shù)功能詳解
這篇文章主要介紹了Vue?Electron實(shí)現(xiàn)輸入法自動(dòng)刷字?jǐn)?shù)功能，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)C#有一定的幫助，感興趣的小伙伴可以跟隨小編一起了解一下
2022-12-12
vue2?利用echarts?單獨(dú)繪制省份的步驟
這篇文章主要介紹了vue2?利用echarts?單獨(dú)繪制省份,首先引入所需要的第三方模塊，通過(guò)示例代碼給大家介紹的非常詳細(xì)，文章末尾給大家補(bǔ)充介紹了vue2.x結(jié)合echarts2實(shí)現(xiàn)顯示具體省份熱力圖的問(wèn)題，需要的朋友可以參考下
2022-01-01
Vue源碼解析之Template轉(zhuǎn)化為AST的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue源碼解析之Template轉(zhuǎn)化為AST的實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-12-12
Vue添加請(qǐng)求攔截器及vue-resource 攔截器使用
這篇文章主要介紹了Vue添加請(qǐng)求攔截器及vue-resource 攔截器使用,需要的朋友可以參考下
2017-11-11