设计一个vue页面,包含一个选择题的题目和5个选项,答对提示正确,答错显示正确答案
时间: 2023-06-14 19:05:00 浏览: 49
下面是一个简单的 Vue 页面,包含一个选择题和5个选项,答对后提示正确,答错后显示正确答案:
```html
<template>
<div>
<!-- 显示题目 -->
<h2>{{ question }}</h2>
<!-- 显示选项 -->
<ul>
<li v-for="(option, index) in options" :key="index" @click="checkAnswer(index)">
{{ option }}
</li>
</ul>
<!-- 显示答案提示或正确答案 -->
<p v-if="showAnswer">{{ isCorrect ? '答对了!' : '答错了,正确答案是:' + correctAnswer }}</p>
</div>
</template>
<script>
export default {
data() {
return {
question: '以下哪个不是 JavaScript 的数据类型?',
options: ['Number', 'String', 'Boolean', 'Function', 'Class'],
correctAnswer: 'Class',
selectedOptionIndex: null,
showAnswer: false
};
},
computed: {
isCorrect() {
return this.selectedOptionIndex === this.options.indexOf(this.correctAnswer);
}
},
methods: {
checkAnswer(index) {
this.selectedOptionIndex = index;
this.showAnswer = true;
}
}
};
</script>
```
说明:
- `question`:题目内容;
- `options`:选项数组;
- `correctAnswer`:正确答案;
- `selectedOptionIndex`:用户选择的选项的索引(初始值为 `null`);
- `showAnswer`:是否显示答案提示或正确答案;
- `isCorrect`:计算属性,用于判断用户选择的选项是否正确;
- `checkAnswer`:当用户选择一个选项时触发,将 `selectedOptionIndex` 设置为用户选择的选项的索引,并将 `showAnswer` 设置为 `true`。