Vue.js 中使用 v-for 指令创建动态任务列表

假设我们有一个任务列表，每个任务有一个标题和一个状态（已完成或未完成），我们可以使用 v-for 指令来遍历这个列表，然后使用 v-bind 指令来动态绑定任务的标题和状态。

例如，我们可以在 Vue 的模板中使用以下代码：

<ul>
  <li v-for='task in tasks' :key='task.id'>
    {{ task.title }}
    <span v-if='task.completed'>已完成</span>
    <span v-else>未完成</span>
  </li>
</ul>

在这个例子中，我们使用 v-for 指令来遍历 tasks 数组，然后使用 :key 属性来指定每个任务的唯一标识符（通常是任务的 ID）。在每个 li 元素中，我们使用 {{ task.title }} 来显示任务的标题，然后使用 v-if 和 v-else 指令来根据任务状态显示不同的文本。

在 Vue 实例中，我们可以定义 tasks 数组，并将其传递给模板：

new Vue({
  el: '#app',
  data: {
    tasks: [
      { id: 1, title: '完成 Vue 教程', completed: true },
      { id: 2, title: '学习 ES6 语法', completed: false },
      { id: 3, title: '写一个 Vue 应用', completed: false }
    ]
  }
})

这样，我们就可以在页面上看到一个任务列表，其中包含每个任务的标题和状态。每次修改 tasks 数组时，Vue 会自动更新列表中的内容。