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){
              //一、獲取文本框輸入的值   二、把文本框的值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>