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

HTML代码：

<div id="app">
  <h1>Task List</h1>
  <div v-for="(task, index) in tasks" :key="index" :class="{'reminder task': task.reminder, 'task': !task.reminder}">
    <h3>{{ task.text }}</h3>
    <p>{{ task.day }}</p>
  </div>
</div>

Vue实例代码：

new Vue({
  el: '#app',
  data: {
    tasks: []
  },
  created() {
    //在Vue实例创建结束的钩子函数中赋值
    this.tasks = [
      {
        id: 1,
        text: 'Buy groceries',
        day: 'Monday, 9am',
        reminder: true
      },
      {
        id: 2,
        text: 'Doctor appointment',
        day: 'Tuesday, 2pm',
        reminder: true
      },
      {
        id: 3,
        text: 'Finish project',
        day: 'Friday, 5pm',
        reminder: false
      }
    ]
  }
})