Vue-小目标案例(下)

最新推荐文章于 2024-06-16 16:00:47 发布

不懂代码的孩子

最新推荐文章于 2024-06-16 16:00:47 发布

阅读量309

点赞数

分类专栏： Vue 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_41957626/article/details/127091472

版权

Vue 专栏收录该内容

66 篇文章 3 订阅

订阅专栏

1.任务记录本的简单实现。

效果图：

(1)当往输入框中输入任务可以点击回车或者增加按钮增加一条目标。新增加的任务显示的显色默认就是黑色，前面的任务栏中的框就是灰色的。

(2)当输错内容又不想一点点的删除的时候，可以直接点击清空，一键删除输入框中的内容。

(3)当想清空所有的任务的时候，可以点击“清空任务”一键删除所有的任务。

(4)当点击任务前面的框可以实现任务的完成，在已完成的列表中可以进行显示。

例如：当我完成“今晚吃鸡”的任务，接下来勾选“已完成的目标”

查看已完成的目标。

(5)同理勾选“未完成的任务”可以查看当前还有哪些任务没有完成。

2.参考代码

<!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>任务案例</title>
    <style>
        /* 设置整个body中字体的大小 */
        body {
            font-size: 14px;
            font-family: "微软雅黑";
        }

        /* 设置input输入框内字体的大小 */
        input {
            font-size: 14px;
        }

        /* 最外层布局的设置 */
        .main {
            width: 800px;
            margin: 0 auto;
            border: 1px solid;
        }


        /* 任务任务输入栏中的样式 */
        input.task {
            /* 设置宽度 */
            width: 100%;
            /* 取消盒子模型 */
            box-sizing: border-box;
            height: 30px;
            /* 设置input中内容的padding */
            padding: 10px;
            /* 取消轮廓线 */
            outline: none;
        }

        /* 设置li的属性 */
        li {
            /* 取消前面的标识 */
            list-style-type: none;
            /* 设置居中 */
            line-height: 40px;
            height: 40px;
            /* 设置padding-左右内容缩进20px */
            padding: 0 20px;
            /* 设置隐藏的border占据空间却不显示 */
            border: 1px solid transparent;
            /*  必须要设置成相对布局，不然子span设置的absolute决定定位的时候参照的是最根的元素，先找第一个位置是relative的*/
            position: relative;
        }

        /* 设置鼠标经过时的样式 */
        li:hover {
            border: 1px solid #4090dc;
        }

        /*  设置关闭按钮*/
        li:hover .close {

            display: block;
        }

        /* 删除任务的X */
        .close {
            display: none;
            top: 0px;
            /* position: absolute; */
            position: absolute;
            right: 20px;
            /* 设置成红色更醒目 */
            color: #e41919;
            /* 设置字体大小 */
            font-size: 20px;
            /* 居中显示 */
            height: 40px;
            line-height: 40px;
            /* 设置成小手的样式 */
            cursor: pointer;
        }

        /* 选择任务的完成状态 */
        .task_start {
            height: 10px;
            width: 10px;
            background-color: rgb(172, 172, 172);
            display: block;
            float: left;
            margin-top: 13px;
            margin-right: 10px;
        }

        /* 完成时的任务 */
        .task_end {
            background-color: rgb(82, 233, 66);
        }

        /* 取消padding和margin */
        body,
        html,
        div {
            padding: 0px;
            margin: 0px;
        }
    </style>
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <!-- 引入bootstrap5 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>

<body>
    <div id="app" class="main">
        <h2>小目标案例</h2>
        <div>
            <h3>小目标案例</h3>
            <!-- 数据绑定 -->
            <input type="text" placeholder="输入你的目标，回车确认或点击增加" @keyup.enter="addList()" v-model="addText" class="task">
            <button class="btn btn-success" style="outline: none;" @click="addList()">增加</button>
            <button class="btn btn-warning" style="outline: none;" @click="addText=''">清空</button>
            <button class="btn btn-danger" style="outline: none;" @click="delAll()">清空任务</button>
            <!-- 显示完成和没有完成的任务 -->
            <p>共有{{prolist.length}}个目标,{{prolist.length-noned.length}}个目标完成,{{noned.length}}个目标没有完成</p>
            <div>
                <label> <input type="radio" name="task" checked @click="changeTask(1)">所有目标</label>
                <label> <input type="radio" name="task" @click="changeTask(2)">已完成目标</label>
                <label> <input type="radio" name="task" @click="changeTask(3)">未完成目标</label>

            </div>
            <ul style="padding: 0px;">
                <li v-for="(item,index) in nowlist">
                    <!-- 绑定的类最好用引号包起来 -->
                    <span class="task_start " @click="comTask(index)" :class="{'task_end':item.status}"></span>
                    <span :class="{'text-success':item.status}">{{item.name}}</span>

                    <span @click="delTask(item)" class="close">X</span>
                </li>
            </ul>
        </div>
    </div>
</body>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            // 添加的任务
            addText: "",
            // 原先的任务
            prolist: [
                { name: "HTML5", status: false },
                { name: "HTML5", status: false },
                { name: "HTML5", status: false },
                { name: "HTML", status: true },
                { name: "CSS", status: true }
            ],
            // 当前的任务
            nowlist: [],
            type: 1

        },
        // 计算属性
        computed: {
            // 未完成的数量
            noned() {
                return this.prolist.filter(function (item) {
                    // 返回未完成的任务
                    return !item.status;
                });
            }
        },
        methods: {
            // 根据不同的选项更换任务
            changeTask(flag) {
                this.type = flag;
                // 根据不同的flag进行转换任务   
                switch (this.type) {
                    // 所有的任务
                    case 1: this.nowlist = this.prolist; break;
                    // 完成的任务
                    case 2: this.nowlist = this.prolist.filter(function (item) { return item.status; }); break;
                    // 未完成的任务
                    case 3: this.nowlist = this.prolist.filter(function (item) { return !item.status; }); break;
                }
                // 转换任务的时候变换按钮的颜色
                this.addText = ""
            },
            // 完成任务
            comTask(index) {
                // 改变状态
                this.nowlist[index].status = !this.nowlist[index].status;
                // 更新数据
                this.changeTask(this.type);
            },
            // 删除任务
            delTask(list) {
                // 在prolist中找到这个元素
                var index = this.prolist.indexOf(list);
                // 从index位置往后删除一个元素
                this.prolist.splice(index, 1);
                // 加载最新的结果
                this.changeTask(this.type);

            },
            // 添加任务采用的是双向数据绑定的方式
            addList() {
                if (this.addText != "") {
                    console.log(this.addText)
                    this.nowlist.push({
                        name: this.addText,
                        status: false
                    });
                    // 更新数据
                    this.changeTask(this.type)
                    // 制空文本

                }

            },
            // 删除所有任务
            delAll() {
                this.nowlist = [];
                this.prolist = [];
                this.changeTask(this.type);

            }

        },
        // 预先加载
        mounted() {
            this.nowlist = this.prolist;
        },

    })
</script>

</html>