vue動(dòng)態(tài)綁定class選中當(dāng)前列表變色的方法示例

更新時(shí)間：2018年12月19日 08:30:03 作者：花生奶糖

這篇文章主要介紹了vue動(dòng)態(tài)綁定class選中當(dāng)前列表變色的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧

這個(gè)小技巧在工作當(dāng)中是非常實(shí)用而且經(jīng)常用到的希望小伙伴兒們能學(xué)到。

先看看效果圖吧

接下來(lái)我們看看怎么實(shí)現(xiàn)的吧

在methods中寫入一個(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的類名，并給與一個(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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

代替Vue?Cli的全新腳手架工具create?vue示例解析
這篇文章主要為大家介紹了代替Vue?Cli的全新腳手架工具create?vue示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10
Vue 兩個(gè)字段聯(lián)合校驗(yàn)之修改密碼功能的實(shí)現(xiàn)
本文以校驗(yàn)兩次密碼的一致性應(yīng)用，給出兩個(gè)可變屬性值的字段之間的聯(lián)合校驗(yàn)的典型解決方案，通過實(shí)例代碼給大家介紹Vue 兩個(gè)字段聯(lián)合校驗(yàn)之修改密碼功能的實(shí)現(xiàn)，需要的朋友一起看看吧
2021-07-07
詳解Vue-cli3 項(xiàng)目在安卓低版本系統(tǒng)和IE上白屏問題解決
這篇文章主要介紹了Vue-cli3 項(xiàng)目在安卓低版本系統(tǒng)和 IE 上白屏問題解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2019-04-04
vue實(shí)現(xiàn)富文本編輯器詳細(xì)過程
Vue富文本的實(shí)現(xiàn)可以使用一些現(xiàn)成的第三方庫(kù),如Quill、Vue-quill-editor、wangEditor等,這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)富文本編輯器的相關(guān)資料,需要的朋友可以參考下
2024-01-01
利用Vue3和element-plus實(shí)現(xiàn)圖片上傳組件
element-plus提供了uploader組件，但是不好定制化。所以本文將利用Vue3和element-plus實(shí)現(xiàn)一個(gè)圖片上傳的組件，感興趣的可以了解一下
2022-03-03
淺談關(guān)于.vue文件中style的scoped屬性
本篇文章主要主要介紹了淺談關(guān)于.vue文件中style的scoped屬性，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2017-08-08
詳解Vue.js搭建路由報(bào)錯(cuò) router.map is not a function
這篇文章主要介紹了詳解Vue.js搭建路由報(bào)錯(cuò) router.map is not a function，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-06-06
vue綁定事件后獲取綁定事件中的this方法
今天小編就為大家分享一篇vue綁定事件后獲取綁定事件中的this方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
2018-09-09
在 Vue-CLI 中引入 simple-mock實(shí)現(xiàn)簡(jiǎn)易的 API Mock 接口數(shù)據(jù)模擬
本文以 Vue-CLI 為例介紹引入 simple-mock 實(shí)現(xiàn)前端開發(fā)數(shù)據(jù)模擬的步驟。感興趣的朋友跟隨小編一起看看吧
2018-11-11
Vue3+Koa2實(shí)現(xiàn)圖片上傳功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何使用Vue3和Koa2實(shí)現(xiàn)圖片上傳功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-02-02