小明: 嘿，小李，听说你最近在研究排课系统？能不能跟我聊聊你是怎么做的？

小李: 当然可以！我用的是Vue.js框架搭建的前端界面。首先，你需要定义数据结构，比如课程表、教师信息和学生信息。

小明: 那么数据结构该怎么设计呢？

小李: 我们可以用JSON对象来存储这些信息。例如：

      const courseData = [
        { id: 1, name: '数学', teacher: '张老师', time: '周一上午' },
        { id: 2, name: '英语', teacher: '李老师', time: '周二下午' }
      ];
    

小明: 明白了，那接下来是如何展示这些数据呢？

小李: 在Vue中，我们可以使用v-for指令动态渲染列表。这里是一个简单的例子：

      <div id="app">
        <ul>
          <li v-for="course in courses" :key="course.id">
            {{ course.name }} - {{ course.teacher }} at {{ course.time }}
          </li>
        </ul>
      </div>
      <script>
        new Vue({
          el: '#app',
          data: {
            courses: [
              { id: 1, name: '数学', teacher: '张老师', time: '周一上午' },
              { id: 2, name: '英语', teacher: '李老师', time: '周二下午' }
            ]
          }
        });
      </script>
    

小明: 这样就可以看到课程列表了。如果想要添加新课程怎么办？

小李: 我们可以增加一个输入框让用户填写课程信息，然后通过按钮触发添加操作。代码如下：

      <input v-model="newCourseName" placeholder="课程名称" />
      <input v-model="newTeacher" placeholder="授课教师" />
      <input v-model="newTime" placeholder="上课时间" />
      <button @click="addCourse">添加课程</button>

      methods: {
        addCourse() {
          this.courses.push({
            id: this.courses.length + 1,
            name: this.newCourseName,
            teacher: this.newTeacher,
            time: this.newTime
          });
          this.newCourseName = '';
          this.newTeacher = '';
          this.newTime = '';
        }
      }
    

小明: 太棒了！最后一个问题，我想下载你的源码，你能分享一下吗？

小李: 当然可以，你可以访问我的GitHub仓库，链接是：https://github.com/example/course-scheduler。

]]>