JavaScript：修改動態建立按鈕的顏色/大小等

Question

我在 vuejs 中建立了動態按鈕，其中每個按鈕代表問題的不同答案。

我的目標是：當我回答錯誤時，正確的選項會以綠色突出顯示，直到下一個問題顯示。

是否還可以使用 CSS 更改這些「BaseButtons」的其他設定？我怎樣才能做到這一點？

<template>
  <div class="container-botoes">
     <BaseButton class="optionsButtons" 
     v-for="options in optionsAnswers" 
     :key="options.id" @click="handleAnswer(options)">
       {{options.ans}}
     </BaseButton>
  </div>
</template>

methods:{
  handleAnswer(options){
    if (options.id === this.correctAnswer){
      this.playerHit = true;
    }
    else {
      this.opponentHit = true;
      
    }
    this.nextquestion();
  },

Answer 1

一種選擇是使用您需要的樣式建立 css 類，然後根據您的條件將它們附加到 BaseButton 元件