vue中按鈕使用v-bind:class動態切換顏色（點擊A號button，背景色變化；點擊B號button，A號回復原背景色，B變色）

當前Vue項目需要做一個按鈕切換的功能（點擊A號button，背景色變化；點擊B號button，A號回復原背景色，B變色）

  =====》  =====》

實現上述功能，最基礎的方法就是，動過獲取對應的dom，強制改變背景色：

<div class="button1" v-on:click="YGDWKGMJ()" ref="ygdwkgmj">開發投資</div>
<div class="button2" v-on:click="XKGMJ()" ref="xkgmj">成交均價</div>
<div class="button2" v-on:click="LMDJ()" ref="lmdj">銷售面積</div>
<div class="button2" v-on:click="CLZFCJMJ()" ref="clzfcjmj">庫存監測</div>

 

YGDWKGMJ() {
      this.$refs.ygdwkgmj.style.backgroundColor = "#3657be";
      this.$refs.xkgmj.style.backgroundColor = "#192e5b";
      this.$refs.lmdj.style.backgroundColor = "#192e5b";
      this.$refs.clzfcjmj.style.backgroundColor = "#192e5b";
 },

這種方式，雖然能實現功能，但是代碼臃腫，后期維護不便。

===============================================================

還有一種方法就是通過傳給 v-bind:class 一個對象，以動態地切換 class

vue官方文檔

<li v-for="(list,index) in leftPart" class="aa" @click="leftChange(index)" :class="{ liBackground:changeLeftBackground == index}">{{list.name}}</li>

data() {
    return {
      leftPart: [
        { name: "開發投資" },
        { name: "成交均價" },
        { name: "銷售面積" },
        { name: "庫存監測" }
      ],
      changeLeftBackground: 0,
    };
  },

methods: {
    leftChange(index) {
      this.changeLeftBackground = index;
    },
}

<style  scoped>
.liBackground {
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#303fb2), to(#2f70d4));
}
</style>