Vue實作多個按鈕切換樣式

1.思路

使用vue的動态綁定class樣式。

設定一個參數​

​opt​

​，然後每個按鈕設定點選事件該變該參數。

每個class用三元表達式判斷opt是否滿足情況。

2.代碼

<p id="btn_box">
        <button
          @click="durationData('CPU', '1')"
          :class="[CPUopts.on == '1' ? 'activeClass' : '']"
        >
          1小時
        </button>
        <button
          @click="durationData('CPU', '2')"
          :class="[CPUopts.on == '2' ? 'activeClass' : '']"
        >
          1天
        </button>
        <button
          @click="durationData('CPU', '3')"
          :class="[CPUopts.on == '3' ? 'activeClass' : '']"
        >
          1周
        </button>
        <button
          @click="durationData('CPU', '4')"
          :class="[CPUopts.on == '4' ? 'activeClass' : '']"
        >
          1月
        </button>
      </p>      

let CPUopts = reactive({ on: "1" });  
function durationData(type, opts) {
      if (type == "CPU") {
        CPUopts.on = opts;
      } 
  };      

3.結果