使用v-for指令实现任务列表的加载。所有任务的初始数据tasks在Vue实例创建结束的钩子函数中赋值初始数据参考tasksjson文件。动态绑定每个任务div的class对于reminder属性为true的任务样式渲染结果为class=reminder task；reminder属性为false的任务class=task

HTML代码：

<div id="app">
  <h2>任务列表</h2>
  <div v-for="(task, index) in tasks" :key="index" :class="{'reminder task': task.reminder, 'task': !task.reminder}">
    {{ task.title }}
  </div>
</div>

JavaScript代码：

new Vue({
  el: '#app',
  data: {
    tasks: []
  },
  created() {
    // 使用axios获取数据
    axios.get('tasks.json')
      .then(response => {
        this.tasks = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
});