vue实现计划表
Vue 实现计划表的方法
使用 Vue CLI 创建项目
通过 Vue CLI 快速初始化一个 Vue 项目，确保开发环境配置正确。安装依赖后，可以开始构建计划表组件。
vue create schedule-app
cd schedule-app
npm install设计计划表数据结构
计划表通常需要存储任务名称、时间、状态等信息。可以使用一个数组来存储这些数据，每个任务是一个对象。
data() {
return {
tasks: [
{ id: 1, name: '完成项目', time: '2023-10-10', completed: false },
{ id: 2, name: '学习 Vue', time: '2023-10-11', completed: true }
],
newTask: { name: '', time: '' }
}
}创建计划表组件
在 Vue 组件中，通过 v-for 渲染任务列表，并提供添加、删除和标记完成的功能。
<template>
<div>
<h3>计划表</h3>
<input v-model="newTask.name" placeholder="任务名称">
<input v-model="newTask.time" type="date" placeholder="时间">
<button @click="addTask">添加任务</button>
<ul>
<li v-for="task in tasks" :key="task.id">
<span :class="{ completed: task.completed }">{{ task.name }} - {{ task.time }}</span>
<button @click="toggleTask(task)">标记完成</button>
<button @click="deleteTask(task.id)">删除</button>
</li>
</ul>
</div>
</template>实现交互逻辑
在 methods 中定义添加、删除和标记完成任务的方法。
methods: {
addTask() {
if (this.newTask.name && this.newTask.time) {
this.tasks.push({
id: Date.now(),
name: this.newTask.name,
time: this.newTask.time,
completed: false
});
this.newTask.name = '';
this.newTask.time = '';
}
},
deleteTask(id) {
this.tasks = this.tasks.filter(task => task.id !== id);
},
toggleTask(task) {
task.completed = !task.completed;
}
}添加样式
通过 CSS 美化计划表，例如为已完成的任务添加删除线。
.completed {
text-decoration: line-through;
color: #888;
}使用 Vuex 管理状态（可选）
如果项目较复杂，可以使用 Vuex 集中管理计划表的状态，便于跨组件共享数据。
import { createStore } from 'vuex';
export default createStore({
state: {
tasks: []
},
mutations: {
addTask(state, task) {
state.tasks.push(task);
},
deleteTask(state, id) {
state.tasks = state.tasks.filter(task => task.id !== id);
},
toggleTask(state, id) {
const task = state.tasks.find(task => task.id === id);
if (task) task.completed = !task.completed;
}
}
});使用第三方库（可选）
如果需要更丰富的功能，可以集成第三方日历或计划表库，如 vue-cal 或 fullcalendar-vue。
npm install vue-cal<template>
<vue-cal :events="tasks" />
</template>部署与优化
完成开发后，通过 npm run build 生成生产环境代码，并部署到服务器。可以根据需求添加本地存储或后端 API 支持。
