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 组件