Vue.js 任务列表加载：使用 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 数组，将每个任务渲染成任务列表的一项。