TodoList案例

最新推荐文章于 2023-04-26 01:00:00 发布

李先坤

最新推荐文章于 2023-04-26 01:00:00 发布

阅读量217

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_43391261/article/details/127696565

版权

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

        #app {
            width: 40%;
            margin: 30px auto;
            background-color: #84AF9B;
            color: #333;
            padding: 20px;
            box-sizing: border-box;
        }

        p {
            margin-bottom: 10px;
        }

        p>span {
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
        }

        ol {
            list-style-position: inside;

        }

        li {
            line-height: 30px;
            margin-bottom: 10px;
        }

        input {
            border: 2px solid slategrey;
            outline: none;
            padding-left: 2px;
            box-sizing: border-box;
        }

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

<body>
    <div id="app">
        <h1>任务列表</h1>
        <!-- 编辑任务总数 和未完成  总数用list.length  未完成用计算属性 -->

        <p>任务总数：<span>{{list.length}}</span> 还有<span>{{unfinish}}</span>未完成 <button @click="del">完成</button></p>
        <ol>
            <!-- 绑定数据  被选中的内容修改颜色 ac   changebtn(index) 当双击击span该内容隐藏 而input显示-->
            <li v-for="(item,index) in list">
                <input type="checkbox" v-model="item.isfinsh"><span :class="{'ac':item.isfinsh}" v-show="item.isedit"
                    @dblclick="changebtn(index)">{{item.content}}</span><input type="text" v-show="!item.isedit"
                    v-model="item.content" @blur="item.isedit='true'">
                <!-- 当鼠标失去焦点时 item.isedit='true"-->
            </li>
            <!-- <li><input type="checkbox"><span>学习唱歌</span><input type="text"></li>
            <li><input type="checkbox"><span>学习跳舞</span><input type="text"></li>
            <li><input type="checkbox"><span>学习钢琴</span><input type="text"></li> -->

        </ol>
        <!-- 添加任务 v-model.trim 去除空格-->
        <div><input type="text" v-model.trim="newcontent" @keyup.enter="add"><button @click="add">添加</button></div>
    </div>
</body>

</html>
<script src="./lib/vue.js"></script>
<script>
    //创建vue实例
    let vue = new Vue({
        el: '#app',
        data: {
            //文本和编辑框只能显示一个
            //isedit true 可以编辑 false 不能编辑
            //content 选择框的内容，isfinsh 是否选中内容，选中就代表已完成
            list: [
                { content: '学习唱歌', isedit: true, isfinsh: false },
                { content: '学习跳舞', isedit: true, isfinsh: false },
                { content: '学习书法', isedit: true, isfinsh: false },
                { content: '学习篮球', isedit: true, isfinsh: false }
            ],
            newcontent: ''
        },
        methods: {
            // 双击span改变是够可以编辑  span隐藏 input框显示
            changebtn(index) {
                // 如果已经被选中则不能被改为编辑状态
                if (this.list[index].isfinsh == true) {
                    return;
                } else {
                    this.list[index].isedit = false;
                }
            },
            // 删除
            del() {
                //    利用filter 保留isfinsh =false
                this.list = this.list.filter(function (item) {
                    return item.isfinsh == false;
                });
            },
            // 添加
            add() {
                if (this.newcontent == '') {
                    return;
                } else {
                    this.list.push({ content: this.newcontent, isedit: true, isfinsh: false });
                    // 添加完成以后清空input框
                    this.newcontent = '';
                }
            }
        },
        computed: {
            // 未完成的数量
            unfinish() {
                let num = 0;
                this.list.forEach(item => {
                    if (item.isfinsh == false) {
                        num++;
                    }
                });
                return num;
            }
        }
    });
</script>