todolist（vue版本）

阿文、...
已于 2023-03-15 22:49:39 修改
阅读量291
点赞数
分类专栏：计算机科学与技术文章标签： vue.js 前端 javascript
于 2023-03-15 22:48:07 首次发布
本文链接：https://blog.csdn.net/weixin_50985113/article/details/129572256
版权
计算机科学与技术专栏收录该内容
4 篇文章 0 订阅
订阅专栏
老师要求设计个todolist，就设计了一下，有不好的地方大家可以指正哈
空格键添加任务，下面各种小功能齐全
喜欢的话点个赞可否？
效果图：
在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        *{
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .titles{
            margin: auto;
            width: 130px;
            color: rgb(231, 94, 151);
            margin-top: 10px;
            margin-bottom: 10px;
            /* background-color: aliceblue; */
        }

        .inpuselects{
            width: 350px;
            margin: auto;
        }

        .inpuselects input{
            width: 350px;
            border-radius: 10px;
            height: 30PX;
        }

        #add{
            border: 1px dashed red;
            width: 800px;
            height: 800px;
            margin: auto;
            position: relative;
            background-color: aqua;
            
        }
        /* 被选中的特效 */
        .xuanzhong{
            color: #d9d9d9;
	        text-decoration: line-through;
            transition: all 1s;
            background-color: rgb(216, 24, 65);
            border: 1px solid wheat;
            border-radius: 10px;
            height: 30px; 
        }

        #lists{
            
            border: 1px solid wheat; 
            border-radius: 10px;
            height: 30px; 
        }
      

        .box li{
           width: 500px;
           height: 30px; 
           margin: auto;
           margin-top: 5px;
        }

        .box button{
            float: right;
            margin-top:4px;
            color: white;
            background-color: red;
            width: 20px;
            height: 20px;
            
        }

        .box label{
            font-size: 20px;
            text-align: center;
        }

        .box{
            margin:10px 0;
        }

        .foot{
            position: absolute;
            bottom: 10px;
            left: 10px;
        }

        .box{
            width: 600px;
            height: 600px;
            overflow: scroll;
            border: 2px dashed red;
            margin: auto;
            margin-top: 50px;
            background-color: white;
            
        }
    </style>
</head>
<body>
    <div id="add">
      <!-- v-cloak用于防止vue未加载而出现的原始代码
        当vue加载完成后，会直接删掉v-cloak这个属性所代表的意思
    -->
        <h1 class="titles">{{title}}</h1>
        <p class="inpuselects">
            <input type="text" placeholder="请输入你的小目标！" v-model="insert_data" @keyup.enter="addtodolist" autofocus ></p>
        
       

        <ul class="box"> 
            <li v-for="(val,key) in todolist">
                <div :class="{xuanzhong:val.status}" id="lists">
                    <input type="checkbox" name=""  v-model="val.status" style="margin-left: 10px;">
                    <label>{{val.content}}</label>
                    <!-- 删除触发事件，把要删除的下标传过去 -->
                    <button @click="dellist(key)" style="margin-right: 10px;">X</button>
                </div>
            </li>
        </ul>

        <li class="foot">当前任务总量为：<span style="color: red;">{{lengs}}</span>
            
            <span style="margin-left: 25px;">是否全选：<input type="checkbox"  @click="selectAll" v-model="ched"></span>
            <button @click="lookALL" style="margin-left: 25px;">显示所有</button>
            <button @click="lookisOK" style="margin-left: 25px;">显示已完成</button>
            <button @click="looknotok" style="margin-left: 25px;">显示未完成</button>
            <button @click="clearALL" style="margin-left: 25px;">删除已完成的</button>
        </li>
       
        
    </div>

    <script>
        // 创建一个空数组用来存储todolist的用户输入
        var listDtat=[
            // {id:1,content:'吃饭',status:true},
        ];


        const vm= new Vue({
            el:'#add',
            data:{
               title:'ToDoList' ,
               insert_data:'',          //用来获取用户输入
               todolist:[],       //用来显示数据
               ched:false,
               lengs:0,
               todolao:[]       //用来记录最原始的数组，后面显示已完成未完成功能需要用到该数据保证最原始的不变改变
            },
            methods: {
                // 添加任务
                addtodolist:function(){
                    if(this.insert_data==''){
                        alert("内容不能为空！")
                    }else{
                    // //获取数组最后一个元素的id并+1,为了防止因为删除而出现同样的id
                    var ids =this.todolist.length==0?1: this.todolist[this.todolist.length-1].id+1;
                    //获取用户输入，并把他转化成规定格式
                    var ob={id:ids,content:this.insert_data,status:false};
                    console.log(ob)
                    //存入到数组
                    this.todolist.push(ob);
                    //用户按下回车后自动把输入框清零
                    this.insert_data='';
                    this.lengs=this.todolist.length;
                    this.todolao=this.todolist
                    }
                },


                // js中事件会先执行，再去改变值，所以checkbox的状态会先改变，model值是后改变
                // 全选或全不选
                selectAll:function(){
                    // alert(this.ched);
                    var c=!this.ched;   //点击的瞬间值是不会改变的，所以我们想获取的值应该是取反的
                    for(let i=0;i<this.todolist.length;i++){
                    this.todolist[i].status=c;
                    } 
                },
                // 删除
                dellist:function(key){
                    this.todolist.splice(key,1);
                    this.lengs=this.todolist.length
                    this.todolao=this.todolist
                },

                 //显示全部
                 lookALL:function(){
                    this.todolist=this.todolao;
                    this.lengs=this.todolist.length
                },

                //显示已经做完的 
                lookisOK:function(){
                    this.todolist=this.todolao;
                    this.todolist=this.todolist.filter(function(n){
                       
                            return n.status;
                    })
                    this.lengs=this.todolist.length
                },

                // 显示没有做完的
                looknotok:function(){
                    this.todolist=this.todolao;
                    this.todolist=this.todolist.filter(function(n){
                    
                            return !n.status;
                    })
                    this.lengs=this.todolist.length
                },

                //删除已完成
                clearALL:function(){
                    // for(let i=0;i<this.todolist.length;i++){
                    //     // 方法1.直接找到直接删除，但是有bug
                    //     // if(this.todolist[i].status==true){
                    //     //     var a=this.todolist.splice([i],1);    
                    //     //     this.lengs=this.todolist.length;
                    //     //     console.log(a)
                    //     // }
                        
                    // 方法2，把未完成的全部找出来，重新赋予
                    // var newArr = [];
				    // for (let i = 0; i < this.todolist.length; i++) {
                    //     if (this.todolist[i].status == false) {
                    //         newArr.push(this.todolist[i]);
					//     }
				    // }
                    // this.todolist = newArr;
                    // this.lengs=this.todolist.length

                    // //方法3，使用filter代替循环
                    // this.todolist=this.todolist.filter(function(n){
                    //     //方法1：判断status的值
                    //     // if (n.status == false) {
                    //     //      return true;
					//     // }

                    //     //方法2：取反
                    //         return !n.status;
                    // })
                    // this.todolao=this.todolist;
                    // this.lengs=this.todolist.length


                    //方法4，极简版本(箭头函数如果只有一传参，可以省略括号，如果只有一个return可以省略花括号和function还有return)
                    this.todolist=this.todolist.filter(n => !n.status)
                    this.todolao=this.todolist;
                    this.lengs=this.todolist.length
                }
            }
        })
    </script>
</body>
</html>