一个小白的vue之路（三）——编写我们自己的todoList插件

前言：从开始写第一篇博客我就在思考我的博客该怎么写，说真的从入手vue开始我也是一篇篇的翻着别人的技术博客过来，从基础的v-on、v-if等基础标签的应用到源码详解层次的都有。我想写一些属于我自己的东西。

todoList插件

这是一个学习完vue基础之后很适合小白那练练手的小插件，东西功能很简单逻辑也不复杂，但如果你可以自己完全敲出来，那恭喜你vue基础过关了！
博主比较懒只实现了功能，样式一片空白（素颜），爱美的同学可以自己发挥。好下面我们直接上代码：

<template>
    <div>
        <input type="text" @keyup.enter="addMsg">
        <ul>
            <li v-for="item in data" :key="item.id"><input type="checkbox" v-model="item.state" @change="stateWatch"/>{{item.msg}}<button @click="deleteOne(item)">删除</button></li>
        </ul>
        一共<span>{{data.length}}</span>条
        <button @click="showAll">全部</button>
        <button @click="showFinished">已完成</button>
        <button @click="showBacklog">未完成</button>
        <button @click="clearFinished">清除完成</button>
    </div>
</template>
<script>
export default {
    name:"todoList",
    
    data(){
        return {
           allMsg:[],
           flag:0
        }
        
    },
    computed:{
        data(){
            if(this.flag==0){
                return this.allMsg;
            }else{
                let backlog=[];
                let finished=[];
                this.allMsg.forEach(msg => {
                    msg.state?finished.push(msg):backlog.push(msg)
                });
                return this.flag==1?backlog:finished
               
            }
        }
    },
   
    methods:{
        addMsg(){
            let msg={id:"",msg:"",state:false};
            msg.id=Math.random()*1000;
            msg.msg=msg.id+event.target.value;
            this.allMsg.push(msg);
        },
        stateWatch(){
            console.log(this.allMsg)
        },
        showAll(){
            this.flag=0;
        },
        showFinished(){
            this.flag=2;
        },
        showBacklog(){
            this.flag=1;
        },
        clearFinished(){
            this.flag=1;
            this.allMsg=this.data;
        },
        deleteOne(msg){
           this.allMsg.splice(this.allMsg.indexOf(msg),1)
        }
    }
}
</script>
<style>
ul{
    list-style: none;
}
</style>