Vue.js Demo

demo.vue

<template lang="jade">
#app
  h1 {{title | uppercase}}
  ul(v-if="todos.length")
    li.task(
      v-for="task in tasks",
      :class="{ done: task.done }",
      @click="task.done = !task.done"
    ) {{task.content}}
  p(v-else) Task List is empty.
</template>

<script>
new Vue({
  el: '#app',
  data: {
    title: 'Todo List',
    tasks: [
      { done: 1, content: 'Task 1' },
      { done: 0, content: 'Another task'}
    ]
  }
})
</script>

<style lang="stylus">
#app
  width 500px
  margin 0 auto
.task
  cursor pointer
  margin 10px 0
  &.done
    color #7f8c8d
    text-decoration line-through
</style>