用v-for完成学习计划表

使用 Vue.js 的 `v-for` 指令可以很容易地创建动态的学习计划表格，它允许你在 HTML 中遍历数组数据，为每一个元素生成一个新的行。下面是一个简单的例子：

<template>
  <table>
    <thead>
      <tr>
        <th>日期</th>
        <th>课程名称</th>
        <th>学习目标</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="plan in learningPlans">
        <td>{{ plan.date }}</td>
        <td>{{ plan.courseName }}</td>
        <td>{{ plan.learningGoal }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      learningPlans: [
        { date: '2023-01-01', courseName: 'JavaScript基础', learningGoal: '掌握变量和数据类型' },
        { date: '2023-01-02', courseName: 'Vue组件', learningGoal: '理解并编写组件' },
        // 更多学习计划...
      ]
    };
  }
};
</script>

在这个例子中，`learningPlans` 是一个数组，包含了每个学习计划的对象。`v-for` 遍历这个数组，每次迭代都会渲染一个新的 `<tr>` 行，显示相应的日期、课程名称和学习目标。