vue動態(tài)綁定class選中當(dāng)前列表變色的方法示例
更新時間：2018年12月19日 08:30:03 作者：花生奶糖
這篇文章主要介紹了vue動態(tài)綁定class選中當(dāng)前列表變色的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
這個小技巧在工作當(dāng)中是非常實用而且經(jīng)常用到的 希望小伙伴兒們能學(xué)到。
先看看效果圖吧
接下來我們看看怎么實現(xiàn)的吧
在methods中寫入一個方法
clickcategory(index){ // 這里我們傳入一個當(dāng)前值
this.categoryIndex = index
}
然后需要在data里面注冊一下
data() {
return {
categoryIndex: 0, //點擊當(dāng)前背景變成白色索引
}
},
在css中設(shè)置我們當(dāng)前選中項為active的類名，并給與一個白色的背景顏色
.active {
background: #fff
}
接下來在html中綁定
<li @click="clickCategory(index)" :class="{active:categoryIndex==index}"> <!-- 選中當(dāng)前動態(tài)綁定class -->
</li>
嗯哼 于是乎我們的點擊選中當(dāng)前改變背景色就這樣完成了
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
代替Vue?Cli的全新腳手架工具create?vue示例解析
這篇文章主要為大家介紹了代替Vue?Cli的全新腳手架工具create?vue示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
Vue 兩個字段聯(lián)合校驗之修改密碼功能的實現(xiàn)
本文以校驗兩次密碼的一致性應(yīng)用，給出兩個可變屬性值的字段之間的聯(lián)合校驗的典型解決方案，通過實例代碼給大家介紹Vue 兩個字段聯(lián)合校驗之修改密碼功能的實現(xiàn)，需要的朋友一起看看吧2021-07-07
詳解Vue-cli3 項目在安卓低版本系統(tǒng)和IE上白屏問題解決
這篇文章主要介紹了Vue-cli3 項目在安卓低版本系統(tǒng)和 IE 上白屏問題解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
Vue富文本的實現(xiàn)可以使用一些現(xiàn)成的第三方庫,如Quill、Vue-quill-editor、wangEditor等,這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)富文本編輯器的相關(guān)資料,需要的朋友可以參考下2024-01-01
利用Vue3和element-plus實現(xiàn)圖片上傳組件
element-plus提供了uploader組件，但是不好定制化。所以本文將利用Vue3和element-plus實現(xiàn)一個圖片上傳的組件，感興趣的可以了解一下2022-03-03
淺談關(guān)于.vue文件中style的scoped屬性
本篇文章主要主要介紹了淺談關(guān)于.vue文件中style的scoped屬性，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
詳解Vue.js搭建路由報錯 router.map is not a function
這篇文章主要介紹了詳解Vue.js搭建路由報錯 router.map is not a function，非常具有實用價值，需要的朋友可以參考下2017-06-06
今天小編就為大家分享一篇vue綁定事件后獲取綁定事件中的this方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
在 Vue-CLI 中引入 simple-mock實現(xiàn)簡易的 API Mock 接口數(shù)據(jù)模擬
本文以 Vue-CLI 為例介紹引入 simple-mock 實現(xiàn)前端開發(fā)數(shù)據(jù)模擬的步驟。感興趣的朋友跟隨小編一起看看吧2018-11-11
這篇文章主要為大家詳細(xì)介紹了如何使用Vue3和Koa2實現(xiàn)圖片上傳功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02