Vue 事件结合双向数据绑定实现todolist 待办事项 已经完成 和进行中

<template>
  <div id="app"> 

      <input type="text" v-model='todo' @keydown="doAdd($event)" />
      <br>
      <hr>
      <br>

    <h2>进行中</h2>
          <ul>

            <li v-for="(item,key) in list" v-if="!item.checked">
              <input type="checkbox" v-model='item.checked'> {{item.title}}   ----  <button @click="removeData(key)">删除</button>
            </li>
          </ul>

    <br>
    <h2>已完成</h2>
    <ul class="finish">

      <li v-for="(item,key) in list" v-if="item.checked">
          <input type="checkbox" v-model='item.checked'> {{item.title}} ----<button @click="removeData(key)">删除</button>
      </li>
    </ul>

    <h2 v-if='ok'>这是一个ok</h2>

    <h2 v-if='!ok'>这是一个No</h2>

    <button @click="getList()">获取list的值</button>

  </div>
</template>

<script>

  /*
       ['录制nodejs','录制ionic']

          [

            {
              title:'录制nodejs',
              checked:true
            },
              {
              title: '录制ionic',
              checked: false
            }
          ]

          */

    export default {
      data () {
        return {
          ok:false,
          todo:'' ,
          list: [

            {
              title: '录制nodejs',
              checked: true
            },
            {
              title: '录制ionic',
              checked: false
            }
          ]
        }
      },
      methods:{

        doAdd(e){
              console.log(e.keyCode)

              if(e.keyCode==13){
              //1、获取文本框输入的值   2、把文本框的值push到list里面
              this.list.push({

                title: this.todo,
                checked: false
              })

              this.todo='';
            }
        },
        removeData(key){

            // alert(key)

            //splice  js操作数组的方法
            this.list.splice(key,1);
        },

        getList(){

          console.log(this.list)
        }
      }

    }
</script>

<style lang="scss">

.finish{
  li{
    background:#eee;
  }
}

</style>