如何用vue简单的实现Todolist？

最新推荐文章于 2024-04-08 15:45:39 发布

Min Lu

最新推荐文章于 2024-04-08 15:45:39 发布

阅读量239

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/xiaoguaiafei/article/details/104981235

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

直接上代码

<!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="./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 start-->
        <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>
        <!--header end-->
        <!--content start-->
        <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>
        <!--content end-->

        <!--device-start-->
        <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>
        <!--device-end-->

       
    </div>

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

        var vm = new Vue({
            el:"#app",
            data:{
                todos:[
                    {id:1,title:"今天大家需要背过10000个单词哦",isFinished:true},
                    {id:2,title:"明天上课需要写代码",isFinished:false}
                ],
                isShow:false,
                prepareRemoveId:"",
                msg:""
            },
            methods:{
                addTodo(){
                    this.todos.push({
                        id:parseInt(Math.random()*10000),
                        title:this.msg,
                        isFinished:false
                    })
                    this.msg = "" //清掉输入框里面的world
                },
                checkTodo(id,isFinished){
                    // console.log(id,isFinished)
                    if(!isFinished){ //说明todo项未完成world
                        //需要model弹出来
                        this.isShow = true
                        //顺便将未完成的传入来的id进行预存储
                        this.prepareRemoveId = id
                        return;
                    }
                    this.removeTodo(id)
                },
                removeTodo(id){ //[{id:2}]
                    //删除数组里面的元素,splice目前解决不了
                    //this.todos.splice(id-1,1)
                    this.todos = this.todos.filter(item=>{
                        if(item.id === id){ //如果传入的id与数组里面每个对象遍历的id相等的话
                            return false
                        }
                        return true
                    })
                }
            }
        })

        //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>
</html>

自己练习，知识点总结。

Min Lu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何用vue简单的实现Todolist？

直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Todol...
复制链接

扫一扫

专栏目录