第一步创建data数据   data:{             name:'',             list:[                 // {id:1,name:'小红',completed:false},                 // {id:2,name:'小蓝',completed:true},                 // {id:3,name:'小紫',completed:false},             ] },   第二步，循环数据输出到模板   <li :class="{completed:item.completed}" v-for='item in list' >              //动态的绑定classcompleted:item.completed完成划线效果                         <div class="view">                             <input class="toggle" type="checkbox" checked>                             <label>{{item.name}}</label>                             <button class="destroy"></button>                         </div>                         <input class="edit" value="Create a TodoMVC template">  </li>   第三步，checkbox和划线联动,当checkbox为true时item.completed的值也为true   <li :class="{completed:item.completed}" v-for='item in list' >                                   <div class="view">                             <input class="toggle" type="checkbox" v-model='item.completed'>                             <label>{{item.name}}</label>                             <button class="destroy"></button>                         </div>                         <input class="edit" value="Create a TodoMVC template">  </li> 第四步，添加数据功能   <header class="header">                 <h1>todos</h1>                 <input class="new-todo" placeholder="What needs to be done?" autofocus @keyup.enter='add' v-model='name'>   // 使用键盘事件调用事件函数，使用双向数据绑定绑定name </header>   methods:{             add(){　   if(this.name.trim() === ''){                                                                //使用this.name.trim()方法防止输入空格                     return                 } 　                                                                                                //使用push方法添加数据对象，this.name='' 用来清除事件处理完成后的文字                 this.list.push({id:4,name:this.name,completed:false}),                   this.name=''             }         },