使用vue做一个待办事项案例

待办事项是什么意思？

待办事项：在未来一段时间内需要去做的。并且现在还未完成的事情。

“待办事项”常用语题型某人还需要完成哪些事项，“待办”的意思是等待办理，“待办事项”意思是等待办理的事项，主要作用是提醒，常用在人们的日程生活中、学习和工作中。

---

待办事项数据存储结构:

       利用数组结构来保存所有待办事项.

       每一项待办事项使用对象结构来保存，

       该对象的属性: 内容(title), 完成状态(checked), 编号(id)

---

添加新待办事项:

       在文本框中输入新待办事项内容

       点击回车实现数据添加的逻辑

       在添加的逻辑中，需要获得到文本框中的输入值

       将文本框中输入的待办事项内容转换为一项待办事项对象数据

       然后添加到所有待办事项数组中保存

css样式：

* {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            background-color: rgb(212, 212, 214);
        }

        #header {
            height: 50px;
            background: #000;
        }

        #header .contenner {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .contenner {
            width: 800px;
            height: 100%;
            margin: 0 auto;
            /* background-color: aquamarine; */


        }

        #header .left {
            color: white;
            font-size: 20px;
        }

        #header .right input {
            width: 200px;
            height: 25px;
            text-indent: 10px;
        }

        #main .afoot,
        #main .completed {
            width: 100%;
        }

        #main .afoot .top,
        #main .completed .top {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #main .afoot .top span,
        #main .completed .top span {
            width: 20px;
            height: 20px;
            background-color: white;
            border-radius: 50%;
            text-align: center;
            line-height: 20px;
        }

        #main .completed {
            margin-top: 30px;
        }

        ul,
        li {
            list-style: none;
        }

        #main li {
            height: 30px;
            background-color: white;
            padding: 4px 0;
            border: 1px solid rgb(212, 212, 214);
            display: flex;
            justify-content: space-between;
        }

        #main li input {
            width: 25px;
            height: 25px;
            margin-top: 3px;
            margin-left: 20px;
        }

        #main li>:nth-child(1) div {
            /* display: inline-block; */
            line-height: 30px;
            margin-left: 10px;
        }

        #main li>:nth-child(1) {
            display: flex;
        }

        #main li button {
            margin-right: 20px;
        }

        #footer {
            margin-top: 50px;
            text-align: center;
        }

html代码：

 


        
        

            

                
ToDoList
                

                    
                
            
        

        
        

            

                

                    

                        
正在进行
                        {{have.length}}

                    
                    

                        

                            

                                
                                
{{item.title}}
                            
                            
                                删除
                            

                        
                    
                

                

                    

                        
已经完成
                        {{complete.length}}
                    
                

                

                    

                        

                            
                            
{{item.title}}
                        
                        
                            删除
                        

                    
                
            
        

        

            全部清空
        
    

vue代码：

Vue.createApp({
            data() {
                return {
                    have: [],
                    complete: [],
                    addToDo: '',
                }
            },
            methods: {
                // 添加数据
                increase() {
                    let arr = this.have.filter(it => it.title == this.addToDo)
                    if (this.addToDo == "" || arr.length != 0) {
                        return
                    }
                    this.have.push({
                        id: this.have.length + 1,
                        checked: false,
                        title: this.addToDo
                    })
                    this.addToDo = ""
                },
                // 删除
                remove(arr, i) {
                    arr.splice(i, 1)
                },

                // 改变状态
                change(it, i, arr) {
                    it.checked = !it.checked
                    let a
                    switch (arr) {
                        case this.have:
                            a = this.complete
                            break;
                        case this.complete:
                            a = this.have
                            break;
                    }
                    a.push(it)
                    arr.splice(i, 1)
                },


            }

        }).mount("#app")

 运行结果：

可以对数据进行增删查改等一系列操作