vue動(dòng)態(tài)綁定class選中當(dāng)前列表變色的方法示例
更新時(shí)間：2018年12月19日 08:30:03 作者：花生奶糖
這篇文章主要介紹了vue動(dòng)態(tài)綁定class選中當(dāng)前列表變色的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
這個(gè)小技巧在工作當(dāng)中是非常實(shí)用而且經(jīng)常用到的 希望小伙伴兒們能學(xué)到。
先看看效果圖吧
接下來(lái)我們看看怎么實(shí)現(xiàn)的吧
在methods中寫(xiě)入一個(gè)方法
clickcategory(index){ // 這里我們傳入一個(gè)當(dāng)前值
this.categoryIndex = index
}
然后需要在data里面注冊(cè)一下
data() {
return {
categoryIndex: 0, //點(diǎn)擊當(dāng)前背景變成白色索引
}
},
在css中設(shè)置我們當(dāng)前選中項(xiàng)為active的類(lèi)名，并給與一個(gè)白色的背景顏色
.active {
background: #fff
}
接下來(lái)在html中綁定
<li @click="clickCategory(index)" :class="{active:categoryIndex==index}"> <!-- 選中當(dāng)前動(dòng)態(tài)綁定class -->
</li>
嗯哼 于是乎我們的點(diǎn)擊選中當(dāng)前改變背景色就這樣完成了
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue動(dòng)態(tài)綁定多個(gè)class以及帶上三元運(yùn)算或其他條件
- Vue v-bind動(dòng)態(tài)綁定class實(shí)例方法
- vue動(dòng)態(tài)綁定class的幾種常用方式小結(jié)
- vue中v-for通過(guò)動(dòng)態(tài)綁定class實(shí)現(xiàn)觸發(fā)效果
- 快速解決vue動(dòng)態(tài)綁定多個(gè)class的官方實(shí)例語(yǔ)法無(wú)效的問(wèn)題
- vue 中動(dòng)態(tài)綁定class 和 style的方法代碼詳解
- vue通過(guò)tailwindcss實(shí)現(xiàn)class動(dòng)態(tài)綁定
相關(guān)文章
vue導(dǎo)出excel文件流中文亂碼問(wèn)題及解決
這篇文章主要介紹了vue導(dǎo)出excel文件流中文亂碼問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue3 Teleport瞬間移動(dòng)函數(shù)使用方法詳解
這篇文章主要為大家詳細(xì)介紹了vue3 Teleport瞬間移動(dòng)函數(shù)使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
uni-app是一款基于Vue.js的跨平臺(tái)開(kāi)發(fā)框架，它借助了 Vue.js 的語(yǔ)法和組件化開(kāi)發(fā)思想，本文將詳細(xì)介紹 uni-app 的全局配置、靜態(tài)資源管理、路由管理以及數(shù)據(jù)通信和狀態(tài)管理的進(jìn)階使用技巧,需要的朋友可以參考下2023-06-06
vue項(xiàng)目有時(shí)候需要根據(jù)頁(yè)面需要?jiǎng)討B(tài)的去修改頁(yè)面標(biāo)題名稱(chēng)，本文就來(lái)介紹一下，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
詳解如何使用router-link對(duì)象方式傳遞參數(shù)？
這篇文章主要介紹了如何使用router-link對(duì)象方式傳遞參數(shù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了vue-resize深度解讀，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
vue+vue-validator 表單驗(yàn)證功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue+vue-validator 表單驗(yàn)證功能的實(shí)現(xiàn)代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-11-11
這篇文章主要為大家詳細(xì)介紹了Vue自定義多選組件的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了Vue如何配置根目錄@(引用路徑)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue2.0中三種常用傳值方式(父?jìng)髯?、子傳父、非父子組件傳值)
在Vue的框架開(kāi)發(fā)的項(xiàng)目過(guò)程中，經(jīng)常會(huì)用到組件來(lái)管理不同的功能，有一些公共的組件會(huì)被提取出來(lái)。下面通過(guò)本文給大家介紹Vue開(kāi)發(fā)中常用的三種傳值方式父?jìng)髯?、子傳父、非父子組件傳值，需要的朋友參考下吧2018-08-08