安装依赖与初始化项目

确保已安装 Node.js 和 Vue CLI。通过以下命令创建 Vue 项目：

npm install -g @vue/cli
vue create todo-app
cd todo-app
npm install axios lodash  # 用于HTTP请求与工具函数

核心功能实现

任务列表数据结构
在 src/components/TodoList.vue 中定义任务数组与选中状态：

data() {
  return {
    tasks: [
      { id: 1, text: 'Task 1', completed: false },
      { id: 2, text: 'Task 2', completed: true }
    ],
    selectedTaskIds: []  // 存储被选中的任务ID
  }
}

批量选择逻辑
添加全选/取消全选方法：

methods: {
  toggleSelectAll() {
    if (this.selectedTaskIds.length === this.tasks.length) {
      this.selectedTaskIds = []
    } else {
      this.selectedTaskIds = this.tasks.map(task => task.id)
    }
  }
}

批量操作实现

删除选中任务
使用 lodash 的 differenceBy 过滤已选任务：

const _ = require('lodash')
methods: {
  deleteSelected() {
    this.tasks = _.differenceBy(this.tasks, this.selectedTaskIds, 'id')
    this.selectedTaskIds = []
  }
}

标记完成/未完成
批量更新任务状态：

updateTaskStatus(completed) {
  this.tasks = this.tasks.map(task => 
    this.selectedTaskIds.includes(task.id) 
      ? { ...task, completed } 
      : task
  )
}

界面绑定

模板部分添加操作按钮与多选框：

<template>
  <div>
    <button @click="toggleSelectAll">
      {{ selectedTaskIds.length === tasks.length ? '取消全选' : '全选' }}
    </button>
    <button @click="updateTaskStatus(true)" :disabled="!selectedTaskIds.length">
      标记完成
    </button>
    <button @click="deleteSelected" :disabled="!selectedTaskIds.length">
      删除选中
    </button>

    <div v-for="task in tasks" :key="task.id">
      <input 
        type="checkbox" 
        v-model="selectedTaskIds" 
        :value="task.id"
      >
      <span :class="{ completed: task.completed }">{{ task.text }}</span>
    </div>
  </div>
</template>

样式优化

添加基础样式增强交互反馈：

.completed {
  text-decoration: line-through;
  color: #888;
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

测试验证

1. 运行开发服务器：npm run serve
2. 勾选多个任务后测试批量删除/状态切换功能
3. 验证全选按钮的联动逻辑是否正确

通过以上步骤，可实现一个支持多选、批量操作任务的Vue待办应用。