<template>
<div id="app">
<input type="text" v-model="todo" v-on:keydown="addObj2($event)">
<button @click="addObj()">+添加</button>
<ul>
<h3>已完成</h3>

<li v-for="(item,key) in todoList" v-if="item.isdo"><input type="checkbox" v-model="item.isdo">{{item.todo}} <button @click="deleteObj(key)">删除</button></li>
</ul>
<ul>
<h3>未完成</h3>
<li v-for="(item,key) in todoList" v-if="!item.isdo" v-bind:class="{'Done':!item.isdo}"><input type="checkbox" v-model="item.isdo">{{item.todo}} <button @click="deleteObj(key)">删除</button></li>
</ul>
<router-view/>
</div>
</template>

<script>
export default {
name: 'App',
data (){
return{
todo:'',
todoList:[],
isdo:true,
}
},
methods:{//用于放置自定义方法
addObj(){
if(!Object.is(this.todo,'')){
let obj={};
[obj.todo,obj.isdo]=[this.todo,this.isdo];
this.todoList.push(obj);
}
this.todo='';
},addObj2(e){
if(e.keyCode===13){
let obj={};
[obj.todo,obj.isdo]=[this.todo,this.isdo];
this.todoList.push(obj);
this.todo='';
}
}
,deleteObj(key){
this.todoList.splice(key,1);//splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
//arrayObject.splice(index,howmany,item1,.....,itemX):index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。item1, ..., itemX 可选。向数组添加的新项目。
}
}
}
</script>

<style>

app {

font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
margin-top: 60px;
}
.Done{
background: #ccc;
}
</style>