1. <div id="app">
    2.         <input type="text" v-model="keyword" @keyup="handleInput">
    3.         <h1>进行中 <span>{{lists.length-isEnd}}</span></h1> 
    4.             <div v-for="(item,index) of lists">
    5.                 <p v-if="!item.checked"><input type="checkbox"   v-model="item.checked">
    6.                     <span>{{item.val}}</span>
    7.                     <button>删除</button>
    8.                 </p>
    9.             </div>
    10.         <h1>已完成 {{isEnd}}</h1>
    11.         <div v-for="(item,index) of lists">
    12.                 <p v-if="item.checked"><input type="checkbox"  v-model="item.checked">
    13.                     <span>{{item.val}}</span>
    14.                     <button>删除</button>
    15.                 </p>
    16.             </div>
    17.     </div>
    19.     <script>
    20.         new Vue({
    21.             el:"#app",
    22.             data(){
    23.                 return {
    24.                     keyword:"",
    25.                     lists:[],
    26.                     isEnd:""
    27.                 }
    28.             },
    29.             methods:{
    30.                 handleInput(event){
    31.                    if(event.keyCode == 13){
    32.                       var keyword = this.keyword;
    33.                       this.lists.push({val:keyword,checked:false})
    34.                       this.keyword= ""
    35.                    }
    36.                 }
    37.             },
    38.             watch:{
    39.                 lists:{
    40.                     handler(val){
    41.                        var newList = val.filter(item=>{
    42.                            return item.checked
    43.                        })
    44.                        console.log(newList)
    45.                        this.isEnd = newList.length
    46.                     },
    47.                     deep:true
    48.                 }
    49.             }
    50.         })
    51.     </script>