JavaScript: Ändern Sie die Farbe/Größe usw. von dynamisch erstellten Schaltflächen

Question

Ich habe dynamische Schaltflächen in VueJS erstellt, bei denen jede Schaltfläche eine andere Antwort auf eine Frage darstellt.

Mein Ziel ist: Wenn ich falsch antworte, wird die richtige Option grün hervorgehoben, bis die nächste Frage angezeigt wird.

Ist es möglich, andere Einstellungen dieser „BaseButtons“ mithilfe von CSS zu ändern? Wie kann ich das machen?

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