我正在使用 VueJS，并且有一個動態(tài)創(chuàng)建的流派按鈕列表。這些按鈕能夠打開和關(guān)閉，當(dāng)它們打開時，我想應(yīng)用 CSS 樣式（如藍色背景）來顯示它們已被選中。當(dāng)它們沒有被選擇時，我希望它回到原來的樣子（帶有灰色邊框的白色背景）。我的問題是我無法實現(xiàn)切換背景顏色功能。我嘗試過使用variant="primary"以及其他變體選項，但它不起作用。我也嘗試過style="border: 2px solid darkgrey; margin:2px;"在應(yīng)用時擦除variant，但這也不起作用。我嘗試使用StackOverflow post直接更改按鈕的 CSS ，但它不起作用。這是我的 index.html 中的按鈕標記：<ul style="list-style: none;">    <button v-if="ShowALLButton" v-on:click="getAllGenres" class = "btn btn-success" style="left: 0px; margin:2px;">ALL</button>        <li style="display: inline;">          <button v-for="buttons in buttonsList" v-if="ShowALLButton" v-on:click="getGenre(buttons)" :pressed.sync="buttons.state" id="buttonID" class = "btn" style="border: 2px solid darkgrey; margin:2px;">            {{ buttons.genre }}.           </button>        </li></ul>本質(zhì)上，上面是一個 for 循環(huán)迭代我的 ButtonList，它是一個看起來像這樣的結(jié)構(gòu)，包含要在按鈕上顯示的類型，以及它是否已打開或關(guān)閉（由狀態(tài)指示，即最初關(guān)閉，如false) 所示。實際的切換功能有效，因為它顯示了正確的流派結(jié)果。但對于那些好奇的人來說，buttonList 看起來像這樣（對象列表）：[{ genre: "Folk", state: false },{ genre: "Rap", state: false },{ genre: "Pop", state: false },...]index.html 中的相關(guān)樣式：<style> .am-active {    background-color: rgb(21, 79, 202);    color: white; } .am-not-active {    background-color: white; }</style>處理按鈕切換和流派選擇的函數(shù)位于我的 script.js 中。我需要todo!應(yīng)用正確的 CSS 樣式來更改按鈕，但我無法做到。// Get Selected GenresgetGenre(button) {  console.log("ENTERED GET GENRE!!!!!!");  var selectedGenresItems = []  // keep track of selected genres  if (!this.selectedGenres.includes(button)) {    this.selectedGenres.push(button);    // todo!    console.log("inside if");    button.className += 'am-active';    console.log(button);    // ^ the above does not work, it just adds a key with "className" = "undefinedam-active" :(  }  else {    this.selectedGenres.pop(button);    // todo! must use .am-not-active  }