如何使用使用v-for指令实现任务列表的加载

在Vue模板中，使用v-for指令来遍历一个数组，将数组中的每个元素渲染成任务列表的一项。
在Vue实例中，定义一个tasks数组，用来存储任务列表的数据。
在Vue实例中，通过异步请求或本地存储等方式获取任务列表的数据，并将数据赋值给tasks数组。
在Vue模板中，使用v-if指令判断tasks数组是否为空，如果为空则显示“暂无任务”，否则显示任务列表。

以下是代码示例：

HTML模板：

<div>
  <h2>任务列表</h2>
  <ul>
    <li v-for="task in tasks" :key="task.id">{{ task.name }}</li>
    <li v-if="tasks.length === 0">暂无任务</li>
  </ul>
</div>

Vue实例：

new Vue({
  el: '#app',
  data: {
    tasks: []
  },
  mounted() {
    // 异步请求获取任务列表数据
    axios.get('/api/tasks')
      .then(response => {
        this.tasks = response.data.tasks;
      })
      .catch(error => {
        console.log(error);
      });
  }
});

在上面的代码中，使用了axios库来发送异步请求获取任务列表数据。在mounted钩子函数中，当组件挂载后会自动执行该函数，从而获取任务列表数据，并将数据赋值给tasks数组。最终，通过v-for指令遍历tasks数组，将每个任务渲染成任务列表的一项。