todolist(vue) 做法及注意点

最新推荐文章于 2024-08-04 12:12:11 发布

西安尤雨溪

最新推荐文章于 2024-08-04 12:12:11 发布

阅读量249

点赞数

本文链接：https://blog.csdn.net/m0_54625720/article/details/113754682

版权

需求

// todoList需求：
// 1、显示所有的todolist (已ok)
// 2、添加任务 (已ok)
// 3、修改任务内容 (已ok)
// 4、修改任务的状态：让任务的状态变成已完成  (已ok)
// 5、删除已完成的任务 (已ok)
// 6、统计任务数量（总数，未完成任务数量）(已ok)
// 7、本地存储。

<!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>todolist</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .war {
            width: 500px;
            height: 500px;
            margin: 100px auto;
            border: 2px solid #cecece;
        }

        h2 {
            text-indent: 200px;
        }

        h3 {
            float: left;
        }

        .one {
            width: 400px;
            height: 400px;
            margin: 0 auto;
            margin-top: 10px;
        }

        .none {
            border: none;
            outline: none;
        }

        .yang {
            color: grey;
            text-decoration: line-through;
        }
    </style>
</head>

<body>
    <div class="war">
        <h2>任务列表</h2>
        <hr>
        <!--任务总数就是数组lists的长度-->
        <h3>任务总数:{{lists.length}} 个 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h3>
        <!-- 调用weiwan（）这个函数，通过排除，返回的就是未完成的个数 -->
        <h3>还有【{{weiwan()}}】个未完成&nbsp;&nbsp;&nbsp;&nbsp;</h3>&nbsp;&nbsp;&nbsp;&nbsp;
        <h3>【删除已完成】</h3><input type="button" value="删除" @click="shan"><br>
        <div class="one">
            <div class="two" v-for="(list,index) in lists">
                <!--v-for 遍历lists ，list是数组的每一个元素，index是小标-->
                <input type="checkbox" :style="top" v-model="list.checked">
                <!--双向绑定list。checked-->                    <!--:class= "是一个json对象"-->
                <input type="text" v-model="list.text" :class="{none:!list.no,yang:list.checked}" 
                    :disabled="list.checked" @focus="jujiao(index)" @blur="shijiao(index)"><br> <!--disabled属性 用于input输入框是否被禁用-->
            </div>
            <input type="text" v-model="xinipt" @keyup="huiche"> <!--添加新内容的输入框，双向绑定data 一个新属性，传值的时候需要新属性的属性值-->
            <input type="button" value=" 添加" @click="fn">
        </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vue = new Vue({
            el: '.war',
            data: {
                xinipt: "",
                'top': 'margin-top: 10px;',
                lists: [{
                        'checked': false,
                        'text': '写js',
                        'no': false
                    },
                    {
                        'checked': false,
                        'text': '写vue',
                        'no': false
                    },
                    {
                        'checked': false,
                        'text': '写css',
                        'no': false
                    },
                ]
            },
            methods: {
                // 点击添加新元素 将新的一个对象插入到数组中去，并且text属性的值就是 添加新内容双向绑定元素
                fn() {
                    this.lists.push({
                        'checked': false,
                        'text': this.xinipt
                    })
                    this.xinipt = ''
                },
                //绑定回车键添加新内容
                huiche(e) {
                    if (e.keyCode === 13) {
                        this.lists.push({
                            'checked': false,
                            'text': this.xinipt
                        })
                        this.xinipt = ''
                    }
                },
                //聚焦，让文本框的输入框出来
                jujiao(index) {
                    this.lists[index].no = true
                },
                // 失焦，文本框消失
                shijiao(index) {
                    this.lists[index].no = false
                },
                shan() {
                    // console.log(index);
                    // for(var i = 0 ;i < this.lists.length; i++){
                    //     if(this.lists.checked){
                    //         this.lists.splice(index,1)
                    //     }
                    // }
                    //通过filte 过滤掉 完成的内容
                    this.lists = this.lists.filter(function (list) {
                        return list.checked === false
                    })

                },
                //返回未完成的个数，也就是过滤完完成的，剩下的未完成的数组长度
                weiwan() {
                    var m = 0
                    for (var i = 0; i < this.lists.length; i++) {
                        if (this.lists[i].checked === false) {
                            m++
                        }
                    }
                    return m
                }
            }
        })
    </script>
</body>

</html>

、

注意几点！

:class="{none:!list.no,yang:list.checked}"
  <!--:class= "是一个json对象" none:!list.no  如果!list.no是true，那就有none这个clss属性-->

 :disabled="list.checked"、
 <!--disabled属性 用于input输入框是否被禁用-->
 ：为vue是的用法，如果list.checked为true，输入框被禁用，相反同理

//通过filte 过滤掉 完成的内容
      this.lists = this.lists.filter(function (list) {
            return list.checked === false
            })
 过滤完新的数组 = 旧数组过滤后的结果
 return 后面的 list.checked === false   是过滤条件