vue实现考试题目功能源码
时间: 2023-12-30 20:01:17 浏览: 37
Vue.js 是一个流行的前端框架,用于构建交互式的用户界面。要实现一个考试题目功能,我们可以使用 Vue.js 来实现。下面是一个简单的示例代码,展示了如何使用 Vue.js 来实现考试题目功能:
```html
<!DOCTYPE html>
<html>
<head>
<title>考试题目功能</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>考试题目功能</h1>
<div v-for="question in questions" :key="question.id">
<h2>{{ question.title }}</h2>
<ul>
<li v-for="option in question.options" :key="option.id">
<label>
<input type="checkbox" v-model="selectedOptions[question.id]" :value="option.id">
{{ option.text }}
</label>
</li>
</ul>
</div>
<button @click="submit">提交答案</button>
<div v-if="showResults">
<h2>答案结果</h2>
<ul>
<li v-for="(result, questionId) in results" :key="questionId">
{{ questions.find(q => q.id === questionId).title }}: {{ result }}
</li>
</ul>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
questions: [
{
id: 1,
title: '问题1',
options: [
{ id: 1, text: '选项1' },
{ id: 2, text: '选项2' },
{ id: 3, text: '选项3' }
]
},
{
id: 2,
title: '问题2',
options: [
{ id: 4, text: '选项1' },
{ id: 5, text: '选项2' },
{ id: 6, text: '选项3' }
]
}
],
selectedOptions: {},
results: {},
showResults: false
},
methods: {
submit() {
// 计算结果
const results = {};
for (const questionId in this.selectedOptions) {
const selected = this.selectedOptions[questionId] || [];
results[questionId] = this.questions.find(q => q.id == questionId).options
.filter(option => selected.includes(option.id))
.map(option => option.text);
}
this.results = results;
this.showResults = true;
}
}
});
</script>
</body>
</html>
```
以上代码演示了一个简单的考试题目功能,包括显示题目、选择答案、提交答案和展示答案结果。这个功能可以通过 Vue.js 来实现,使用户能够方便地进行答题并获取结果。