vue生成动态任务表list

在Vue.js中生成动态任务列表（Task List），你可以通过以下几个步骤实现：

1. **数据驱动**：首先，在Vue组件中创建一个数组，存储任务的数据模型。例如：

data() {
  return {
    tasks: [
      { id: 1, title: '任务1', isDone: false },
      { id: 2, title: '任务2', isDone: true }
      // ... 其他任务项
    ]
  };
}

2. **模板渲染**：使用`v-for`指令遍历`tasks`数组，并显示每个任务的属性。如：

<template>
  <div class="task-list">
    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        {{ task.title }}
        <input type="checkbox" :checked="task.isDone" @change="toggleTask(index)">
      </li>
    </ul>
  </div>
</template>

这里，`:checked`绑定任务的状态，`@change`监听状态改变并调用相应的方法。

3. **方法处理**：定义一个方法，比如`toggleTask`，用于切换任务的状态：

methods: {
  toggleTask(index) {
    this.tasks[index].isDone = !this.tasks[index].isDone;
  }
}

现在每次点击任务标题旁边的复选框，任务状态就会更新。