vue2 简易版todoList

<template>
  <div id="app">
    <h1>todoList</h1>
    <input type="text" v-model="title"/>
    <button @click="handleClick">添加</button>
    <ul>
      <li :key="index" v-for="(item,index) in todo">
        <input type="checkbox" v-model="item.done" @click="handleCheck(index)"/>
        {{ item.title }}
        <button @click="del(index)">删除</button>
      </li>
    </ul>
    <div>
      {{active}}完成/{{ all }}总数
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      title:'',
      todo:[
        {title:'吃饭',done:false},
        {title:'睡觉',done:true},
        {title:'vue2',done:false}
      ]
    }
  },
  computed:{
      active(){
        return this.todo.filter(v=>v.done==true).length
      },
    all(){
        return this.todo.length
    }
  },
  methods:{
    handleClick(){
      this.todo.push(
              {
                title: this.title,
                done:false
              }
      )
      console.log (this.title)
      this.title=''
    },
    del(index){
      this.todo.splice(index, 1)
    },
    handleCheck(index){
      console.log (index)
      this.todo[index].done=true
    }
  }
}
</script>

<style>

</style>