vue实现TodoList

最新推荐文章于 2024-06-21 00:45:00 发布

Ylk_IT

最新推荐文章于 2024-06-21 00:45:00 发布

阅读量108

点赞数

本文链接：https://blog.csdn.net/Ylk_manong/article/details/118654813

版权

vue实现TodoList

<!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/bootstrap.css">      <!-- 引入bootstrap的css -->   
    <script src="./js/vue.js"></script>                    <!-- 引入vue.js -->
    <style>
        .box {
            margin: 0 auto;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
            width: 320px;
            background-color: #fff;
            color: #303133;
        }

        .btn-group {
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .bor {
            padding: 5px;
            border: 0;
            border-radius: 0 !important;
            border-bottom: 1px solid #ddd !important;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .bor>p {
            flex: 1;
            display: flex;
            align-items: center;
            margin: 0;
            cursor: pointer;
        }

        .ss {
            text-decoration: line-through;
        }

        .select {
            background-color: cornflowerblue !important;
        }

        .bors {
            border: 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">
            <h3 class="text-center font"><strong>ToDoList</strong></h3>
            <ul class="box list-group">
                <li class="list-group-item">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="请输入内容" v-model.lazy="DataText.name"
                            @keyup.enter="add">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="button" @click="add">添加</button>
                        </span>
                    </div>
                </li>
                <li class="list-group-item text-center">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default" v-for="(item,index) in tabData"
                            :class="{'select':activeIndex==index}" @click="activeIndex=index"> {{item.title}} </button>
                    </div>
                    <ul class="list-group text-left">
                        <li class="bor" v-for="(item,index) in variation(activeIndex)"
                            v-show="variation(activeIndex)!=0">
                            <p @click="item.isFinished = !item.isFinished" :class="{'ss':item.isFinished}">{{item.name}}</p>
                            <button class="btn btn-primary" @click="remove(item.id)">删除</button>
                        </li>
                        <li class="list-group-item text-center bors" v-show="variation(activeIndex)==0">
                            暂无内容
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</body>
<script>
    if (window.localStorage) {
        var storage = window.localStorage;
        // storage.clear()
        var DataList = storage.getItem('goods') ? JSON.parse(storage.getItem('goods')) : [];
        var app = new Vue({
            el: "#app",
            data: {
                activeIndex: 0,
                DataList,
                tabData: [
                    {
                        id: 1,
                        title: "全部",
                    },
                    {
                        id: 2,
                        title: "未完成",
                    },
                    {
                        id: 3,
                        title: "完成",
                    },
                ],
                DataText: {
                    id: new Date().getTime(),
                    name: '',
                    isFinished: false
                },
            },
            methods: {
                add() {
                    if (this.DataText.name != '') {
                        this.DataList.unshift(this.DataText)
                        this.DataText = {
                            id: new Date().getTime(),
                            name: '',
                            isFinished: false
                        }
                    }
                },
                remove(id) {
                    this.DataList=this.DataList.filter(ite=>ite.id!=id)
                },
                variation(index) {
                    let arr = [];
                    if (index == 0) {
                        arr = this.DataList
                    }
                    if (index == 1) {
                        arr = this.DataList.filter(item => !item.isFinished);
                    }
                    if (index == 2) {
                        arr = this.DataList.filter(item => item.isFinished);
                    }
                    return arr;
                }
            },
            updated() {
                storage.setItem('goods', JSON.stringify(this.DataList))
            }
        })
    }
</script>

</html>

Ylk_IT

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue实现TodoList

vue实现TodoList<!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"
复制链接

扫一扫