vue2实现简单的todolist

作者: 莫闻 | 来源:发表于2017-05-20 08:41 被阅读9次
    <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>
    

    相关文章

      网友评论

        本文标题:vue2实现简单的todolist

        本文链接:https://www.haomeiwen.com/subject/ggwuxxtx.html