利用Vue框架写一个简单的todolist

这个todolist使用三个部分：
HTML页面使用了SUI的Moblie的组件
js需要下载vue.js的源文件

HTML部分代码：

        
        

            
            
            
标题
          
          
          

              //输入生成卡片
            

                

                  
{{item.title}}
                  
                      
                  
                  
                        
                    
                
              
          
        

                  

                      

                          
你确定要抛弃我嘛?
                          抛弃
                      
                  
        
          
          

            

                

                    
                        {{item.txt}}
                    
                    
                
            
          
    

css代码：

*{
    margin:0;
    padding:0;
    list-style: none;
}
section{
    padding-top:54px;
}
.card-content{
    overflow: hidden;
    padding:10px;
}
.card-content button{
    margin-left:10px;
}
.mask{
    width: 100%;
    height: 100%;
}
.mask-bg{
    position: fixed;
    top:0;
    left: 0;
    z-index:99;
    width: 100%;
    height: 100%;
    background:rgba(204, 204, 204, 0.582);
}
.mask-content{
    width:80%;
    height: 130px;
    background:white;
    position: absolute;
    left:50%;
    margin-left:-40%;
    top:50%;
    margin-top:-65px;
    z-index: 100;
    border-radius: 10px;
}
.mask-content p{
    padding:10px;
}
.mask-content button{
    margin-right:20px;
    margin-bottom:5px;
}
footer ul{
   display: flex;
   justify-content: space-around;
   position: absolute;
   bottom:20px; 
   width: 100%;

}
footer ul li .button{
    width:80px;
    height: 80px;
    border-radius: 50%;
    line-height: 80px;
    text-align: center;
}

js的Vuejs代码

new Vue({
    el:'#app',
    data:{
        Tflag:true,//输入框的判断
        val:'',
        Xflag:true,//勾选框的判断
        todos:[{//生成的卡片是输入框数组
            id:1,
            title:'任务一',
            Xflag:true,
        },{
            id:2,
            title:'任务二',
            Xflag:true,
        }],
        Sflag:false,//勾选框是否勾中的判断
        btns:[{
            txt:'A',
            Bflag:true,//按钮的判断
            style:'success'
        },{
            txt:'F',
            Bflag:true,
            style:'warning'
        },{
            txt:'U',
            Bflag:true,
            style:'danger'
        }],
        type:"A",
    },
    methods: {
        hide(){//对输入框的隐藏
            this.Tflag=!this.Tflag;
        },
        send(val){//输入框进行生成卡片
            this.todos.push({//利用todos的数据形式，来把数据push进去
                id:this.todos.length+1,
                title:val,
                Xflag:true,
            });
            this.val='';//清空输入框
            this.Tflag=!this.Tflag;//隐藏输入框
        },
        del(index){//弹框的删除
            this.todos.splice(index,1)
        },
        show(index){//直接删除提示,删除根据勾选框进行判断
            if(this.todos[index].Xflag===false){
                this.Sflag=!this.Sflag;
            }else{
                this.todos.splice(index,1)
            }
        },
        select(index){//点击勾选框进行判断是否选中
            this.todos[index].Xflag=!this.todos[index].Xflag;
        }
    },
    computed: {
        
        alltodos(){//点击all按钮返回所有的值
            return this.todos
        },
        finish(){//点击finish按钮返回完成任务的所有值Xflag是勾选框的判断
            return this.todos.filter(item=>item.Xflag&&item)
        },
        unfinish(){
            return this.todos.filter(item=>!item.Xflag&&item)//遍历数组然后返回点击的相应值
        },
        newTodos(){//将原来的todos数据写成可变的，点击下面的按钮可以将每个部分的数据分开
            switch(this.type){
                case "A":
                    return this.alltodos;
                    break;
                case "F":
                    return this.finish;
                    break;
                case "U":
                    return this.unfinish;
                    break;
            }
        },
    },
})