uniapp用代码写出单选答题，并且选完显示正确选项

好的，下面是一个示例，展示如何使用uniapp编写一个单选题的答题界面，并且选完后显示正确选项的样式：

<template>
  <div class="question">
    <div class="title">{{question.title}}</div>
    <div class="options">
      <div class="option" v-for="(option, index) in question.options" :key="index" @click="selectOption(index)">
        <div class="option-text">{{option.text}}</div>
        <div class="option-icon" :class="{'selected': option.selected, 'correct': showAnswer && option.correct, 'wrong': showAnswer && !option.correct }"></div>
      </div>
    </div>
    <div class="answer" v-if="showAnswer">
      正确答案是：{{question.options[question.answer].text}}
    </div>
  </div>
</template>

<script>
export default {
  props: ['question'],
  data() {
    return {
      showAnswer: false
    };
  },
  methods: {
    selectOption(index) {
      // 取消前一个选项的选中状态
      this.question.options.forEach((option) => {
        option.selected = false;
      });
      // 选中当前选项
      this.question.options[index].selected = true;
      // 显示答案
      this.showAnswer = true;
    }
  }
};
</script>

<style>
.question {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.options {
  display: flex;
  flex-direction: column;
}

.option {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer;
}

.option-text {
  flex: 1;
  font-size: 16px;
}

.option-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #ccc;
  margin-right: 10px;
}

.selected {
  background-color: #007aff;
}

.correct {
  background-color: green;
  border-color: green;
}

.wrong {
  background-color: red;
  border-color: red;
}

.answer {
  margin-top: 10px;
  font-size: 16px;
  color: #007aff;
}
</style>

在上面的代码中，我们使用uniapp的模板语法和样式来构建一个单选题的答题界面。props中的question对象包含了题目的问题和选项，以及正确答案的索引。我们使用v-for指令来遍历选项，使用@click指令来监听选项的点击事件，使用:class指令来动态改变选项的样式。在selectOption方法中，我们使用一个selected属性来记录选项的选中状态，并且在选中某个选项后显示正确答案的样式。在showAnswer属性为true时，我们会显示正确答案。