vue实现todolist

页面设计我参考的是http://www.todolist.cn/，做出来的效果如下

主要功能是1.添加任务进正在进行；2：点击删除符号可以删除该任务；3：点击完成任务可以将正在进行中的任务转移至已经完成；4：统计正在进行和已经完成的任务数量；5：点击垃圾桶清空所有信息。不足就是用户输入数据后不会自动清除输入框中遗留的数据。本来想用复选框来标记是否完成，但是在处理复选框时碰到了老是将未完成的任务标记成完成的情况，不知道如何修正，于是偷懒用了图标

var app=new Vue({
    el:'#todoapp',
    data : {
        list:[],
        inputvalue:"",
        isshow:false,
        todocount:"",
        arr:[],
        
        
    },
    methods: {
        add:function(){
            if(this.inputvalue==""){
                alert("输入不允许为空！")
                return false
            }
            else{
                this.list.push(this.inputvalue)
            }
            
        },
        remove:function(index){
            this.list.splice(index,1);
            
            
        },
        finish:function(item,index){
             
             this.arr.push(item);
             item.state=!item.state;
             this.list.splice(index,1);
             
        },
        remove2:function(indexes){
            this.arr.splice(indexes,1);
        },
        clear:function(){
            this.list=[];
            this.arr=[];
        }
       
    },
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ToDoList-最简单的待办事项</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
</head>
<body>
    <section id="todoapp">
    <header>
        <span id="tit">ToDoList</span>
            <input type="text" placeholder="添加ToDo" v-model="inputvalue" @keyup.enter="add">
    </header>
    <div id="main">
        <h2>正在进行<span id="todocount">{{ list.length }}</span></span>
            
        <ol class="todolist">
         <li v-for="(item,index) in list" class="li1">
             <div class="view">
                 <label > {{ item }}</label>
                 <img src="images/gouxuan.png" id="pic4" @click="finish(item,index)">
                 <img src="images/shanchu.png" id="pic1" @click="remove(index)">
             </div>
         </li>
        </ol>
        <h2>已经完成<span id="donecount">{{arr.length}}</span></span>
        <ul class="donelist">
            <li v-for="(arrs,indexes) in arr" class="li2">
                <div class="finish">
                    <label for="ch2">{{ arrs }}</label> 
                    <img src="images/wancheng.png" id="pic5">
                    <img src="images/shanchu.png" id="pic2" @click="remove2(indexes)">
                </div>
            </li>
        </ul>
        </div>
        <footer>
            <img src="images/删除2.png" @click="clear" id="pic3">
            <h4>点击垃圾桶清空信息</h4>
        </footer>
</section>
<script src="js/index.js"></script>
</body>
</html>

html

*{
    margin: 0;
    padding: 0;
    list-style-type: none;
    
}
body{
    background-color: #dfe6e9;
}
header{
    height: 60px;
    background-color: #2d3436;
    color: #dfe6e9;
    position: relative;
}
#tit{
    position: absolute;
    line-height: 60px;
    left: 340px;
    font-size: 1.5em;
}
input{
    position: absolute;
    width: 400px;
    height: 24px;
    border-radius: 5px;
    right: 220px;
    bottom: 18px;
}
#main{
    margin: 0 auto;
    width: 600px;
    height: 400px;
}

#todocount,#donecount{
    float: right;
    border: 1px solid #74b9ff;
    background-color: #74b9ff;
    border-radius: 50%;
}
.li1 #pic1{
    width: 20px;
    height: 20px;
    position: absolute;
    top: 4px;
    right: 5px;
    cursor: pointer;
    
}
label{
    font-size: 1em;
    font-family: "隶书";
    font-weight: lighter;
    cursor: pointer;
   
    
}
.view{
    background-color: #f5f6fa;
    border: 1px solid #f5f6fa;
    border-radius: 5px;
}
.li1{
    margin: 10px 0;
    position: relative;
}

.li2{
    margin: 10px 0;
    position: relative;
}

.li2 #pic2{
    width: 20px;
    height: 20px;
    position: absolute;
    top: 4px;
    right: 5px;
    cursor: pointer;
}
.finish{
    background-color: #b2bec3;
    border: 1px solid #b2bec3;
    border-radius: 5px;
}
footer{
    margin: 0 auto;
    width: 380px;
    height: 80px;
    text-align: center;
    
}
#pic3{
    width: 40px;
    height: 40px;
    
}
.li1 #pic4{
    width: 20px;
    height: 20px;
    position: absolute;
    top: 4px;
    right: 30px;
    cursor: pointer;
}
.li2 #pic5{
    width: 20px;
    height: 20px;
    position: absolute;
    top: 4px;
    right: 30px;
    cursor: pointer;
}

css

猜你喜欢