初学vue实现简单待办事项列表

最新推荐文章于 2024-06-16 16:00:47 发布

小文又困了

最新推荐文章于 2024-06-16 16:00:47 发布

阅读量179

点赞数

分类专栏： Javascript学习文章标签： vue.js javascript 前端 vue

本文链接：https://blog.csdn.net/weixin_58528567/article/details/133957422

版权

Javascript学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

初步简单学习了解vue后，完成一个简单的待办事项列表
示图:
在这里插入图片描述
CSS代码：
样式可能有点…不怎么好看，可以自己改一下，多担待


    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body,
        html {
            min-width: 1200px;
        }

        .clearfix::after {
            visibility: hidden;
            height: 0;
            content: '';
            display: none;
            clear: both;
        }

        .container {
            width: 1200px;
            margin: 0 auto;
        }

        .top {
            height: 70px;
            background-color: black;
            line-height: 70px;
        }

        .topp {
            height: 70px;
        }

        .topp input {
            padding: 10px;
            width: 400px;
            border-radius: 5px;
            height: 20px;
        }

        .topp div:first-child {
            color: white;
            line-height: 70px;
            font-size: 30px;
            float: left;
            margin-left: 275px;
        }

        .topp div:nth-child(2) {
            float: left;
            margin-left: 100px;
        }

        .man input {
            height: 30px;
        }

        .toppp {
            margin-top: 30px;
            display: flex;
            /* justify-content: space-between; */
            align-items: center;
        }

        .toppp div:first-child {
            font-size: 30px;
            margin-left: 275px;
        }

        .toppp div:nth-child(2) {
            margin-left: 520px;
        }

        .footer .fxk {
            width: 1200px;
            margin-left: 275px;
            width: 648px;
            height: 50px;
            background-color: beige;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }

        .footer input {
            width: 20px;
            height: 20px;
            margin-left: 10px;
            margin-top: 15px;
            float: left;
        }

        .fxk div:nth-child(2) {
            float: left;
            line-height: 50px;
            font-size: 20px;
            margin-left: 10px;
        }

        .box {
            display: flex;
            flex-wrap: wrap;
        }

        button {
            width: 20px;
            height: 1.25rem;
        }
        </style>

HTML代码部分：
这里用的vue3.x记得引入
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
也可以复制链接浏览器打开Ctrl+C和Ctrl+V保留里面的内容在本地使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.global.js"></script>
    </head>
<body>
    <div id="app">
        <div class="top ">
            <div class="topp container clearfix ">
                <div>ToDoList</div>
                <div><input type="text" placeholder="添加ToDo" id="send" @keyup.enter="handleAddProceed()"></div>
            </div>

        </div>
        <div class="main container">
            <div class="footer">
                <div class="toppp clearfix">
                    <div>
                        正在进行
                    </div>
                    <div>
                        <span>{{proceeds.length}}</span>
                    </div>
                </div>

                <div class="fxk" v-for=" proceed in proceeds" :key="proceed.id">
                    <div class="box">
                        <div><input type="checkbox" :id="'inp'+proceed.id" :checked="proceed.checked"
                                @click="handleAdd(proceed.id,proceed,$event)">
                        </div>
                        <div v-bind:id="proceed.id">{{proceed.title}}</div>
                    </div>
                    <button v-bind:id="'but'+proceed.id" @click="handleRmove(proceed.id,$event)">-</button>
                </div>

                <div class="toppp">
                    <div>
                        已经完成
                    </div>
                    <div>
                        <span>
                            {{finishs.length}}
                        </span>
                    </div>
                </div>
               <!--加上key是防止，v-for的就地更新，所以这里不推荐key=索引，因为你在删除时，索引会变，在添加事项时，key有可能重复-->
                <div class="fxk" v-for="finish in finishs" :key="finish.id">
                    <div class="box">
                    	 <!--  @=v-on:简写   :=v-bind简写 -->
                        <div><input type="checkbox" :id="'int'+finish.id" :checked="finish.checked"  @click="handleAdd(finish.id,finish,$event)">
                        </div>
                        <div v-bind:id="finish.id">{{finish.title}}</div>
                    </div>
                    <button v-bind:id="'bnt'+finish.id" @click="handleRmove(finish.id,$event)">-</button>
                </div>
            </div>
        </div>
    </div>
    </body>
</html>

JS部分：

   const { createApp } = Vue //解构赋值
        createApp({
            data() {
                return {
                    id: 1, //方便简单设置id，不想可以在第一个方法的id处，id=时间戳也不错
                    proceeds: [], //未完成事项数组
                    finishs: [], //完成事项数组
                }
            },

            methods: {
            //输入框添加待办事项方法（回车事件）
                handleAddProceed() {
                    const curr = {
                        id: this.id++,
                        title: send.value, //获取到input的值
                        checked: false    //默认复选框不勾选
                    }
                    this.proceeds.push(curr) //统一默认刚加入的事项都未完成
                    //这里可以加一个输入框值=''
                },
                
                //删除按钮事件
                handleRmove(id, event) {
                //一开始这里是两个删除分开写，然后想到通过id（#），进行判断合二为一
                //id对应button标签中的id
                    let ee = event.target.id.slice(0, 3)
                    if (ee == 'but') {
                    //数组的过滤
                        this.proceeds = this.proceeds.filter((title) => title.id !== id)
                    } else {
                        this.finishs = this.finishs.filter((title) => title.id !== id)
                    }

                },
                //未完成变成完成加入完成组，理解一下，反之（点击事件）
                handleAdd(id, title, event) {
                    let ee = event.target.id.slice(0, 3)
                    title.checked = !title.checked
                    if (ee == 'inp') {
                    //加入完成组时，先在未完成组删除，然后加入完成组，顺序没关系
                        this.proceeds = this.proceeds.filter((title) => title.id !== id)
                        this.finishs.push(title)
                    } else {
                        this.finishs = this.finishs.filter((title) => title.id !== id)
                        this.proceeds.push(title)
                    }
                },
            }
        }).mount('#app')  //这里创建挂载vue实例app一步到位，可分开写