快捷導(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ī)格的頁面，需要通過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，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

Vue兩個(gè)版本的區(qū)別和使用方法(更深層次了解)
在我們使用 vue時(shí)，我們可以引用兩個(gè)不同版本的 Vue，分別是 Vue完整版（vue.js）和 Vue（vue.runtime.js ）非完整版，那么它們的區(qū)別是什么呢，今天我們就來分析下這兩個(gè)不同版本之間的區(qū)別，一起看看吧
2020-02-02
ant-desigin-vue中form表單的使用解讀
這篇文章主要介紹了ant-desigin-vue中form表單的使用解讀，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
Vue 框架之動(dòng)態(tài)綁定 css 樣式實(shí)例分析
這篇文章主要介紹了Vue 框架之動(dòng)態(tài)綁定 css 樣式的方法，本文通過分享小實(shí)例給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-11-11
如何在vue中使用kindeditor富文本編輯器
這篇文章主要介紹了vue中使用kindeditor富文本編輯器的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-12-12
如何在Vue3中實(shí)現(xiàn)文件上傳功能結(jié)合后端API
文件上傳的功能實(shí)現(xiàn)是我們做Web應(yīng)用時(shí)候最為常見的應(yīng)用場景,下面這篇文章主要給大家介紹了關(guān)于如何在Vue3中實(shí)現(xiàn)文件上傳功能結(jié)合后端API的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-09-09
Vue?動(dòng)態(tài)路由的實(shí)現(xiàn)詳情
這篇文章主要介紹了Vue?動(dòng)態(tài)路由的實(shí)現(xiàn)，動(dòng)態(tài)路由是一個(gè)常用的功能，根據(jù)后臺(tái)返回的路由json表，前端動(dòng)態(tài)顯示可跳轉(zhuǎn)的路由項(xiàng)，本文主要實(shí)現(xiàn)的是后臺(tái)傳遞路由，前端拿到并生成側(cè)邊欄的一個(gè)形勢，需要的朋友可以參考一下
2022-06-06
Vue如何實(shí)現(xiàn)分批加載數(shù)據(jù)
這篇文章主要介紹了Vue如何實(shí)現(xiàn)分批加載數(shù)據(jù)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue編譯器util工具使用方法示例
這篇文章主要為大家介紹了vue編譯器util工具使用方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
vue3+elementPlus項(xiàng)目支持設(shè)置默認(rèn)附件方式
這篇文章主要介紹了vue3+elementPlus項(xiàng)目支持設(shè)置默認(rèn)附件方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue-router 權(quán)限控制的示例代碼
本篇文章主要介紹了vue-router 權(quán)限控制的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09