<template>
  <div id="app">
  <h1 v-text="title"></h1>
  <input v-model="newItem" v-on:keyup.enter="addItem">
  <ul>
    <li v-for="item in items" v-bind:class="{finished:item.isFinished}" v-on:click="toggleFinish(item)">
        {{item.label}}
    </li>
  </ul>
  </div>
</template>
<script>
export default {
  data:function(){
    return {
      title:'计划清单',
      items: [
        {
          label:'每天写一篇教程',
          isFinished:false
        },
        {
          label:'每天健身一小时',
          isFinished:false
        },
      ],
      newItem:''
    }
  },
  methods: {
     toggleFinish:function(item){
        item.isFinished = !item.isFinished
      },
      addItem:function(){
        console.log(this.newItem);
        this.items.push({
          label:this.newItem,
          isFinished:false
        })
        this.newItem = '';
      }
  }
}
</script>
<style>
.finished {
  text-decoration:line-through;
}
</style>