用vue3写一个阅卷页面
时间: 2023-05-15 21:06:09 浏览: 85
好的,以下是一个简单的用 Vue3 编写的阅卷页面的代码示例:
```html
<template>
<div>
<h1>阅卷页面</h1>
<div v-for="(question, index) in questions" :key="index">
<h2>第 {{ index + 1 }} 题</h2>
<p>{{ question.content }}</p>
<div v-for="(option, i) in question.options" :key="i">
<input type="radio" :id="`q${index}o${i}`" :name="`q${index}`" :value="option" v-model="answers[index]">
<label :for="`q${index}o${i}`">{{ option }}</label>
</div>
</div>
<button @click="submit">提交</button>
</div>
</template>
<script>
import { reactive } from 'vue';
export default {
setup() {
const questions = [
{
content: '1 + 1 = ?',
options: ['1', '2', '3', '4'],
},
{
content: '2 * 2 = ?',
options: ['2', '4', '6', '8'],
},
{
content: '3 - 1 = ?',
options: ['1', '2', '3', '4'],
},
];
const answers = reactive(Array(questions.length).fill(''));
const submit = () => {
console.log(answers);
// 在这里可以将答案提交到后端进行处理
};
return {
questions,
answers,
submit,
};
},
};
</script>
```
这个页面包含了多个题目,每个题目都有多个选项,用户需要选择其中一个选项作为答案。当用户点击提交按钮时,页面会将用户的答案打印到控制台上,你可以在 `submit` 函数中将答案提交到后端进行处理。