实现任务完成状态切换

在Vue待办应用中，可以通过v-model绑定复选框与任务的完成状态。假设任务数据存储在todos数组中，每个任务对象包含id、text和completed属性：

<template>
  <div v-for="todo in todos" :key="todo.id">
    <input 
      type="checkbox" 
      v-model="todo.completed"
      @change="updateCompletion(todo)"
    >
    <span :class="{ 'completed': todo.completed }">
      {{ todo.text }}
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: [
        { id: 1, text: '学习Vue', completed: false },
        { id: 2, text: '编写代码', completed: false }
      ]
    }
  },
  methods: {
    updateCompletion(todo) {
      // 可选：此处可添加API调用或状态管理操作
      console.log(`任务${todo.id}状态更新为: ${todo.completed}`);
    }
  }
}
</script>

添加任务完成统计功能

通过计算属性实时统计已完成任务数量和百分比：

computed: {
  completedCount() {
    return this.todos.filter(todo => todo.completed).length;
  },
  totalTasks() {
    return this.todos.length;
  },
  completionPercentage() {
    return this.totalTasks > 0 
      ? Math.round((this.completedCount / this.totalTasks) * 100)
      : 0;
  }
}

在模板中显示统计结果：

<div class="stats">
  <p>已完成: {{ completedCount }} / {{ totalTasks }}</p>
  <p>进度: {{ completionPercentage }}%</p>
  <progress 
    :value="completedCount" 
    :max="totalTasks"
  ></progress>
</div>

添加样式增强交互

为已完成任务添加视觉反馈：

.completed {
  text-decoration: line-through;
  color: #888;
}

.stats {
  margin-top: 20px;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 4px;
}

状态持久化（可选）

如果需要保存状态到本地存储：

methods: {
  saveToLocalStorage() {
    localStorage.setItem('todos', JSON.stringify(this.todos));
  }
},
created() {
  const savedTodos = localStorage.getItem('todos');
  if (savedTodos) {
    this.todos = JSON.parse(savedTodos);
  }
}

在状态变更时调用保存方法：

updateCompletion(todo) {
  this.saveToLocalStorage();
}