vue.js制作学习计划表用css设置样式

在Vue.js中创建一个学习计划表，并使用CSS设置样式，你可以按照以下步骤进行：

1. **创建组件**:
首先，你需要创建一个Vue组件，例如`LearningPlan.vue`，用于显示你的计划。这个组件可以包含一个列表或者表格结构，每个元素代表一天的学习任务。

<template>
  <div class="learning-plan">
    <table>
      <thead>
        <tr>
          <th>日期</th>
          <th>课程名称</th>
          <th>完成状态</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(task, index) in tasks" :key="index">
          <td>{{ task.date }}</td>
          <td>{{ task.courseName }}</td>
          <td><span :class="{ done: task.completed }">【{{ task.completed ? '已完成' : '待完成' }}】</span></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tasks: [
        // 任务数据...
      ]
    }
  }
}
</script>

2. **添加CSS样式**:
然后，在`app.css`或单独的样式文件中，定义`.learning-plan`, `.table`, `tr`, `td`, `th`, 和`.done`等类的样式。

.learning-plan {
  width: 80%;
  margin: 0 auto;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #f2f2f2;
}

.done {
  color: green;
  font-weight: bold;
  cursor: pointer; /* 显示提示鼠标悬停完成状态 */
}