用vue.js简单实现todo-list

<template>
  <div>
    <h1 v-text="title"></h1>
    <!--newItem为新加入的计划，将它与输入的文本双向绑定
    回车时调用addNew方法！-->
    <input v-model="newItem" v-on:keyup.enter="addNew">
    <ul>
      <!--将finished属性与item的完成状态绑定，点击item触发Finish方法！-->
      <li v-for="item in items"
          v-bind:class="{finished:item.isFinished}" v-on:click="Finish(item)">
        {{item.label}}
      </li>
    </ul>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        title:'This is a todo list',
        //初始化item裂变和新增裂变
        items:[],
        newItem:''
      }
    },
    methods:{
      //改变item的完成状态
      Finish:function(item){
        item.isFinished = !item.isFinished
      },
      //将新计划push进items数组
      addNew:function(){
        this.items.push({
          label:this.newItem,
          isFinished:false
        })
        //每次只添加一项，所以清空newItem
        this.newItem=''
      }
    }
  }
</script>
<style>
  .finished{
    text-decoration: underline;
  }
</style>