vue2实现简单的todolist

<template>
  <div id="app">
    <ul>
      filterShop:<input type="text" v-model="key">
      <li v-for="item in filterShop">
        {{item.val}}
        {{item.do}}
      </li>
    </ul>
    <button @click="all">All</button>
    <button @click="done">Done</button>
    <button @click="undo">Undo</button>
  </div>
</template>
<script>
  export default {
    data(){
      return {
        shoppinglist: [ 
          {
            val:"v1",
            do:true
          },{
            val:"v2",
            do:true
          },{
            val:"v3",
            do:false
          }
         ],
        key:"",
        isDone:"" //设置一个标志来筛选list
      }
    },
    computed:{
      filterShop(){ 
        var _t = this;
        return _t.shoppinglist.filter(function(item){
          return item.do !== _t.isDone;
        });
      }
    },
    methods:{
      all(){
        this.isDone = "";
      },
      done(){
        this.isDone = false;
      },
      undo(){
        this.isDone = true;
      }
    }
  }
</script>