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}"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['question'],
  methods: {
    selectOption(index) {
      // 取消前一个选项的选中状态
      this.question.options.forEach((option) => {
        option.selected = false;
      });
      // 选中当前选项
      this.question.options[index].selected = 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;
}
</style>

在上面的代码中，我们使用uniapp的模板语法和样式来构建一个单选题的答题界面。props中的question对象包含了题目的问题和选项。我们使用v-for指令来遍历选项，使用@click指令来监听选项的点击事件，使用:class指令来动态改变选项的样式。在selectOption方法中，我们使用一个selected属性来记录选项的选中状态。当用户选中某个选项时，我们先取消前一个选项的选中状态，再选中当前选项。