初始化 Vue 项目

使用 Vue CLI 创建新项目，确保已安装 Node.js 和 Vue CLI：

npm install -g @vue/cli
vue create todo-app
cd todo-app
npm run serve

核心数据结构设计

在 src/App.vue 中定义任务数据与基础方法：

data() {
  return {
    tasks: [
      { id: 1, title: '学习Vue', completed: false },
      { id: 2, title: '写代码', completed: true }
    ],
    newTaskTitle: ''
  }
}

新增任务功能

添加输入框和提交按钮，绑定 v-model 和 @click 事件：

<input v-model="newTaskTitle" placeholder="输入任务">
<button @click="addTask">添加</button>

<script>
methods: {
  addTask() {
    if (this.newTaskTitle.trim()) {
      this.tasks.push({
        id: Date.now(),
        title: this.newTaskTitle,
        completed: false
      });
      this.newTaskTitle = '';
    }
  }
}
</script>

删除任务功能

为每个任务项添加删除按钮，传递任务索引或 ID：

<ul>
  <li v-for="(task, index) in tasks" :key="task.id">
    {{ task.title }}
    <button @click="deleteTask(index)">删除</button>
  </li>
</ul>

<script>
methods: {
  deleteTask(index) {
    this.tasks.splice(index, 1);
  }
}
</script>

修改任务状态

通过复选框切换任务完成状态，使用 v-model 双向绑定：

<li v-for="task in tasks" :key="task.id">
  <input type="checkbox" v-model="task.completed">
  <span :class="{ completed: task.completed }">{{ task.title }}</span>
</li>

<style>
.completed { text-decoration: line-through; }
</style>

任务筛选功能

添加筛选逻辑，根据状态显示不同任务列表：

data() {
  return {
    filter: 'all' // 可选 'all', 'active', 'completed'
  }
},
computed: {
  filteredTasks() {
    switch (this.filter) {
      case 'active': return this.tasks.filter(t => !t.completed);
      case 'completed': return this.tasks.filter(t => t.completed);
      default: return this.tasks;
    }
  }
}

本地存储持久化

使用 localStorage 保存任务数据，确保刷新后不丢失：

created() {
  const savedTasks = localStorage.getItem('tasks');
  if (savedTasks) this.tasks = JSON.parse(savedTasks);
},
watch: {
  tasks: {
    handler(newTasks) {
      localStorage.setItem('tasks', JSON.stringify(newTasks));
    },
    deep: true
  }
}

运行与测试

启动开发服务器并验证功能：

npm run serve

访问 http://localhost:8080，测试任务的增删改查及状态切换功能是否正常。