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