写一个vue的选课页面
时间: 2024-02-04 22:36:01 浏览: 17
好的,以下是一个简单的 Vue 选课页面示例:
```vue
<template>
<div>
<h1>选课页面</h1>
<form @submit.prevent="submitCourses">
<div v-for="(course, index) in courses" :key="index">
<input type="checkbox" :id="`course-${index}`" :value="course" v-model="selectedCourses">
<label :for="`course-${index}`">{{ course }}</label>
</div>
<button type="submit">提交</button>
</form>
<div>
<h2>已选课程</h2>
<ul>
<li v-for="(course, index) in selectedCourses" :key="index">{{ course }}</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
courses: ["语文", "数学", "英语", "物理", "化学", "生物"],
selectedCourses: []
}
},
methods: {
submitCourses() {
console.log(this.selectedCourses); // 在控制台中输出已选课程
}
}
}
</script>
```
在这个示例中,我们首先在 `data` 中定义了 `courses` 数组和 `selectedCourses` 数组,分别用于存储所有可选课程和用户已选课程。然后,在模板中使用 `v-for` 指令渲染所有可选课程,并使用 `v-model` 指令将用户选择的课程绑定到 `selectedCourses` 数组中。最后,在表单提交时,我们调用 `submitCourses` 方法来处理已选课程。
当用户选择课程并提交表单时,我们可以在控制台中输出已选课程,你可以根据具体需求进行后续的操作,比如将已选课程保存到后端数据库中等。