使用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代码：

 <div id="app">

        <!-- 头部 -->
        <div id="header">
            <div class="contenner">
                <div class="left">ToDoList</div>
                <div class="right">
                    <input type="text" placeholder="添加ToDo" v-model.trim="addToDo" @keydown.enter="increase">
                </div>
            </div>
        </div>

        <!-- 主体 -->
        <div id="main">
            <div class="contenner">
                <div class="afoot">
                    <div class="top">
                        <h2>正在进行</h2>
                        <span>{{have.length}}</span>

                    </div>
                    <ul v-if="have.length != 0">
                        <li v-for="item,i in have" :key="item.id">
                            <div>
                                <input type="checkbox" v-model="item.checked" @click="change(item,i,have)">
                                <div>{{item.title}}</div>
                            </div>
                            <button type="button" @click="remove(have,i)">
                                删除
                            </button>

                        </li>
                    </ul>
                </div>

                <div class="completed">
                    <div class="top">
                        <h2>已经完成</h2>
                        <span>{{complete.length}}</span>
                    </div>
                </div>

                <ul v-if="complete.length != 0">
                    <li v-for="item,i in complete" :key="item.id">
                        <div>
                            <input type="checkbox" v-model="item.checked" @click="change(item,i,complete)">
                            <div>{{item.title}}</div>
                        </div>
                        <button type="button" @click="remove(complete,i)">
                            删除
                        </button>

                    </li>
                </ul>
            </div>
        </div>

        <div id="footer">
            <a href="/" @click.prevent="have=[];complete=[]">全部清空</a>
        </div>
    </div>

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")

 运行结果：

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