vue：基础todolist待办事项完整，数据双向绑定，和循环遍历，判断方法，回车触发事件

vue：基础todolist待办事项完整，数据双向绑定，和循环遍历，判断方法，回车触发事件

点单选框，选项状态改变。

在这个事件中，主要是对数据双向绑定，和循环遍历，判断方法的运用。
1.其中我们对键盘事件做了捕获，当在表单中输入数据“回车时”添加信息的操作。

<input type="text" v-model="todo" @keydown="doadd($event)"/>

doadd(e){
      // this.list.push(this.todo)
      console.log(e.keyCode)
      if(e.keyCode==13){
        this.list.push({
        title:this.todo,
        checked:false
      })
      }
      this.todo=''
    },

<template>
  <div id="app">
    <input type="text" v-model="todo" @keydown="doadd($event)"/>
    <button @click="doadd()">增加</button>
    <br>
    <br>
    <h2>进行中</h2>
    <ul>
    <li v-for="(aa,key) in list" v-if="!aa.checked">
      <input type="checkbox" v-model="aa.checked"/>{{aa.title}}<button @click="dodel(key)">删除</button>
    </li>
  </ul>
  <h2>已完成</h2>
  <ul>
    <li v-for="(aa,key) in list" v-if="aa.checked">
      <input type="checkbox" v-model="aa.checked"/>{{aa.title}}<button @click="dodel(key)">删除</button>
    </li>
  </ul>

  </div>
</template>

<script>
export default {
  data(){
    return{
      ok:true,
      todo:'',
      list:[
        {
          title:"123",
          checked:true
        },
        {
          title:"456",
          checked:false
        },
      ]
    }
  },
  methods:{
    doadd(e){
      // this.list.push(this.todo)
      console.log(e.keyCode)
      if(e.keyCode==13){
        this.list.push({
        title:this.todo,
        checked:false
      })
      }
      this.todo=''
    },
    dodel(key){
      // alert(key)
      this.list.splice(key,1)
    }
  }
}
</script>

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