Lean Vue 2

by Shin Okada

HTML

<script src="https://unpkg.com/vue"></script>
<div id='app'>
  <h2>All tasks</h2>
  <ul>
    <li v-for="task in tasks" v-if="task.completed" v-text="task.description"></li>
  </ul>

  <h2>Incomplete task</h2>
  <ul>
    <li v-for="task in incompleteTasks" v-text="task.description"></li>
  </ul>


</div>

CSS

.is-loading {
  background: red;
}

.color-red {
  color: red;
}

.color-blue {
  color: blue;
}

JavaScript

var app = new Vue({
  el: '#app',
  data: {
    tasks: [{
      description: 'Go to the store',
      completed: true
    }, {
      description: 'Go to Meny',
      completed: true
    }, {
      description: 'Buy a car',
      completed: false
    }, {
      description: 'Buy a milk',
      completed: true
    }, {
      description: 'Buy bread',
      completed: false
    }]
  },
  computed: {
    incompleteTasks() {
      return this.tasks.filter(task => !task.completed);
    }
  }
})