利用vue完成选课功能，当点击选课时，课程名称会出现在下方的“选中课程”输入框中利用vue完成选课列表

在Vue.js中实现一个选课功能，你可以采用组件化的方式来构建。首先，创建一个基本的结构，包括课程列表和选中课程的输入框。这里是一个简单的步骤示例：

1. **数据模型**: 定义一个数组`courses`来存储课程信息，每个课程包含`name`等属性。

data() {
  return {
    courses: [
      { id: 1, name: '课程1' },
      { id: 2, name: '课程2' },
      // 更多课程...
    ],
    selectedCourses: [],
  };
},

2. **HTML模板**: 使用v-for指令遍历`courses`数组，并添加一个`<input>`元素用于显示已选课程。

<template>
  <div>
    <ul>
      <li v-for="(course, index) in courses" :key="course.id">
        <input type="checkbox" :value="course.name" @click="toggleSelection(course.name)">
        {{ course.name }}
      </li>
    </ul>
    <br />
    <label>选中课程:</label>
    <input type="text" v-model="selectedCourses.join(', ')" readonly>
  </div>
</template>

3. **方法处理**: 定义`toggleSelection`方法来切换课程的选择状态并更新`selectedCourses`数组。

methods: {
  toggleSelection(courseName) {
    if (this.selectedCourses.includes(courseName)) {
      this.selectedCourses = this.selectedCourses.filter(name => name !== courseName);
    } else {
      this.selectedCourses.push(courseName);
    }
  },
},

当你点击某个课程名对应的复选框时，`toggleSelection`会被触发，相应地改变选中课程的输入框内容。