vue学习二，简单todoList实现（慕课网学习笔记）

<template>
   <div id="app">
     <h1>{{title}}</h1>
     <input v-model="newItem" @keyup.enter="addNew"/>
     <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 () {
    return {
       title: 'this is a todo list',
       items:[], //存储记事的数组
       newItem:'' //绑定input输入的值
    }
  },
  methods:{
     //点击记事完成的事件，isFinished取反，添加下划线
     toggleFinish:function(item){
        item.isFinished=!item.isFinished;
     },
     //新建记事
     addNew:function(){
        this.items.push({
           label:this.newItem,
           isFinished:false
        });
        this.newItem="";//清空重置,双向绑定
     }
  }
}
</script>

<style>
.finished{text-decoration:underline;}
</style>

App.vue文件