vue之实现todolist

最新推荐文章于 2022-03-31 22:01:42 发布

一十四画生

最新推荐文章于 2022-03-31 22:01:42 发布

阅读量180

点赞数

文章标签： vue javascript js vue.js es6

本文链接：https://blog.csdn.net/weixin_44395929/article/details/104979860

版权

//今天实现todolist(不懂得童鞋可以百度todolist看一下效果)

一、页面布局

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todolist</title>
    <link rel="stylesheet" href="./base/sui.css">
    <style>
        .btn-box {
            display: flex;
            justify-content: flex-end;
        }

        .btn-box button {
            margin: 0 5px;
        }
    </style>
</head>

<body>
    <div id="app">
        <header class="bar bar-nav">
            <a class="icon icon-left pull-left"></a>
            <a class="icon icon-emoji pull-right"></a>
            <h1 class="title">TodoList</h1>
        </header>

        <div class="content">
            <div class="content-block-title">简单卡片</div>
            <p>
                <input @keyup.enter="addTodo" type="text" v-model="msg">
            </p>
            <div class="card" v-for="todo in todos">
                <div class="card-content">
                    <div class="card-content-inner">
                        <p>{{todo.title}}</p>
                        <div class="btn-box">
                            <button :class="{'button-fill':todo.isFinished}" class="button button-success"
                                @click="todo.isFinished=!todo.isFinished">
                                <span class="icon icon-check"></span>
                            </button>
                            <button @click="checkTodo(todo.id,todo.isFinished)" class="button button-danger">
                                <span class="icon icon-remove"></span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="device-content" v-if="isShow" @click="isShow=false">
            <div class="modal modal-in" style="display: block; margin-top: -72px;">
                <div class="modal-inner">
                    <div class="modal-text">确定要删除此项吗?</div>
                </div>
                <div @click="removeTodo(prepareRemoveId)" class="modal-buttons ">
                    <span class="modal-button modal-button-bold">确定</span>
                </div>
            </div>
            <div class="modal-overlay modal-overlay-visible"></div>
        </div>


    </div>

二、js实现

<script src="./base/vue.js"></script>
    <script>

        var vm = new Vue({
            el: "#app",
            data: {
                todos: [
                    { id: 1111, title: "今天要做的事", isFinished: true },
                    { id: 2222, title: "明天要做的事", isFinished: false }
                ],
                isShow: false,
                prepareRemoveId: "",
                msg: ""
            },
            methods: {
                addTodo() {
                    this.todos.push({
                        id: this.create_id(),
                        title: this.msg,
                        isFinished: false
                    })
                    this.msg = ""
                }
                ,
                checkTodo(id, isFinished) {
                    if (!isFinished) {
                        this.isShow = true;
                        this.prepareRemoveId = id;
                        return
                    }
                    this.removeTodo(id)
                }
                ,
                removeTodo(id) {
                   this.todos = this.todos.filter(item=>{
                        if(item.id !== id){                   
                           return true
                        }
                    })
                }
                ,
                create_id() {
                    let str = "1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM";
                    let id = "";
                    for (let i = 0; i < 16; i++) {
                        let index = Math.floor(Math.random() * 62);
                        id += str[index]
                    }
                    return id;
                }

            }
        })

        //arr.filter数组的过滤
        //需求： 过滤掉全是偶数
        //arr.filter方法他不会改变原数组！  concat
        /* var arr = [1,2,3,4,5,6,7]
        arr = arr.filter(item=>{
            if(item %2 ===0){
                return false //false就代表从数组里面移除了
            }
            return true //true就代表剩下元素放入一个新的数组里面去
        })
        console.log(arr) */
    </script>
</body>

好好学习，天天向上。中国加油，武汉加油，千峰加油！