toDoList

最新推荐文章于 2024-05-22 14:46:56 发布

zexin-lai

最新推荐文章于 2024-05-22 14:46:56 发布

阅读量328

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_37648452/article/details/107550132

版权

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

todoList

使用Vue粗糙山寨微软的To Do 中的清单
实现了的功能

增加清单: enter按键事件, 把单个清单任务对象, 添加到清单数组,
完成清单: 点击checkbox复选框, 控制在哪个列表显示, 默认事件去除
本地存储: localStorage, 每次增加, 删除, 完成清单操作 ,都要保存
删除清单: 点击删除按钮, 从清单数组删除对应的任务, splice

山寨版:

在这里插入图片描述

原版:

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ToDo</title>
    <script src="./js/vue.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body {
            background-color: rgb(104, 126, 202);
        }
        #app {
            margin-left: 10px;
            margin-right: 10px;
            flex-direction: column;
            justify-content: space-between;
            height: 100vh;
        }
        /* #toDoList {
            padding-top: 60px;
        } */
        .colorWhite {
            color: #FFF;
        }
        #doing h1 {
            font-size: 40px;
        }
        #done h2 {
            width: 80px;
            font-size: 16px;
            line-height: 24px;
            font-weight: normal;
            border-radius: 5px;
            text-align: center;
            background-color: rgb(94,112,178);
            margin: 5px 0;
        }
       
        .list ul li {
            height: 60px;
            line-height: 60px;
            background-color: #FFF;
            border-radius: 10px;
            margin-top: 2px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .list ul li span {
            display: flex;
            align-items: center;
        }
        .list ul li button {
            margin-right: 15px;
            border: 0;
            background-color: rgb(245, 85, 85);
            outline: none;
            width: 24px;
            height: 24px;
            color: white;
            border-radius: 12px;
        }
        #done ul li span {
            text-decoration: line-through;
            color: gray;
        }
        input[type="checkbox"] {
            width: 25px;
            height: 25px;
            border-radius: 12px;
            margin: 0 15px;
        }
        /* #toDoAdd {
            
        } */
        #toDoAdd input {
            box-sizing: border-box;
            height: 60px;
            border-radius: 6px;
            border: 0;
            width:100%;
            background-color: rgb(93,114,187);
            font-size: 16px;
            color: white;
            text-indent: 16px;
            outline: none;
        }
        input::-webkit-input-placeholder { /* WebKit browsers 适配谷歌 */
            color: white;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="toDoList">
            <div id="doing" class="list">
                <h2 class="colorWhite">清单</h2>
                <h1 class="colorWhite">Vuejs</h1>
                <ul>
                    <li v-for="item,index in toDoList" :key='index' v-show="item.isShow"> <span><input type="checkbox" @click.prevent='isDone(index)'>{{item.content}} </span>
                       <button @click="delItem(index)">X</button></li>
                </ul>
            </div>
            <div id="done" class="list">
                <h2 class="colorWhite">&gt;&nbsp;已完成</h2>
                <ul>
                    <li v-for="item,index in toDoList" :key='index' v-show="!item.isShow"> <span><input type="checkbox" @click.prevent='isDone(index)' checked>{{item.content}}</span>
                        <button @click="delItem(index)">X</button</li>
                </ul>
            </div>
        </div>
       
        <div id="toDoAdd">
            <div><input type="text" name="" placeholder="+  添加任务" v-model="listItem" @keydown.enter="toDoAdd"></div>
        </div>
        <!-- <div style="width: 60px;"> -->

        </div>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                toDoList:[],
                listItem: ''
            },
            methods: {
                save: function() {
                    localStorage.toDoList = this.toDoList
                },
                toDoAdd: function() {
                    var itemObj = {
                        content: this.listItem,
                        isShow: true,
                        id: this.toDoList.length
                    }
                    this.toDoList.push(itemObj);
                    this.listItem = '';
                    this.save()
                },
                isDone: function(index) {
                    console.log(index);
                    this.toDoList[index].isShow = !this.toDoList[index].isShow;
                    this.save()
                },
                delItem: function(index) {
                    this.toDoList.splice(index, 1)
                    this.save()
                },
                save: function() {
                    localStorage.toDoList = JSON.stringify(this.toDoList)
                }
            },
            mounted: function() {
                this.toDoList = localStorage.toDoList? JSON.parse(localStorage.toDoList) : [];
            }
        })
    </script>
</body>
</html>