一 创建测试项目

vue init webpack-simple vuedemo

二 进入demo目录

cd vuedemo

三 安装依赖

cnpm install

四 修改代码App.vue

<template>
  <div id="app">
    <input type="text" v-model="todo" @keydown="doAdd($event)"/>
<h2>doing</h2>
 <ul>
  <li v-for="(item,key) in list" :key="item.id" v-if="!item.checked">
   <input type="checkbox"  v-model="item.checked"/> {{item.title}}--- <button @click="removeData(key)">Delete</button>
  </li>
  </ul>


  <h2>done</h2>
 <ul class ="finish">
  <li v-for="(item,key) in list" :key="item.id" v-if="item.checked">
  <input type="checkbox" v-model="item.checked"/> {{item.title}}--- <button @click="removeData(key)">Delete</button>
  </li>
  </ul>

  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      todo:'',
      list:[
        {
          title:'write book',
          checked:true
        },
        {
          title:'lean cook',
          checked:true
        }
      ]
    };
  },
  methods:{
    doAdd(e){
      if(e.keyCode == 13){//enter
        this.list.push({title:this.todo, checked:false});
        this.todo = ""
      }
    },
    removeData(key){
      this.list.splice(key, 1)
    }
  }


};
</script>

<style>
.finish li{
  background:#eee;
}
</style>

五 运行

npm run dev

image.png

六 总结

1 v-if筛选其的使用,当满足筛选条件时，才显示，可以配合v-else使用。
本例中，时在v-for内使用v-if,用于显示循环中满足条件的项。
2 监听键盘事件时,e.keyCode代表着按键码，其中e.keyCode为13，代表回车键。当然也可以使用@keyup.enter来监听回车事件。

七 参考

https://cn.vuejs.org/v2/guide/conditional.html#v-if