自学前端第二天——实现计划表单

喵桑..

已于 2024-04-28 14:38:44 修改

阅读量387

点赞数 7

分类专栏： 50天自学前端文章标签：前端

于 2024-03-17 12:23:42 首次发布

本文链接：https://blog.csdn.net/SKL4399/article/details/136771440

版权

50天自学前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

代码项目来源：

VUE小案例 - 记事本 - 掘金

效果：

本人学习过程中修改过的最终代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- S 主体 -->
    <section id="note" class="mainZone">
        <!-- S 头部 -->
        <header class="headZone">
            <div>邵奎令记事</div>
            <input class="textInput" type="text" placeholder="别偷懒，请输入任务吧" v-model="message" @keyup.enter="addList">
            <button @click="clearTextBox" class="clearButton">清空</button>
        </header>
        <!-- E 头部 -->
        <!-- S 列表区域 -->
        <section class="listZone">
            <div class="tips" v-show="listMsg.length===0">还没有任务请添加一个吧</div>
            <div v-for="(item,index) in listMsg" @dblclick="delectMsg(index)" @click="finishMsg(index)"
                :class="item.class" v-show="listMsg.length>0">{{index + 1}} . {{item.text}}</div>
        </section>
        <!-- E 列表区域 -->
        <!-- S 底部功能按键 -->
        <footer class="bottleZone">
            <span class="countzone" v-text="count+' items left'"></span>
            <span class="clearbtn" @click="clearMsg">CLEAR</span>
        </footer>
        <!-- E 底部功能按键 -->
    </section>
    <!-- E 主体 -->





    <!-- VUE2开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#note',
            data: {
                message: "",
                listMsg: [],
                count: 0
            },
            methods: {
                addList() {
                    if (this.message !== "") {
                        this.listMsg.push({ text: this.message, class: 'todo' });
                        this.count += 1
                        this.message = "";
                    }
                },
                delectMsg(index) {
                    this.listMsg.splice(index, 1);
                    this.count -= 1
                },
                finishMsg(index) {
                    this.listMsg[index].class = 'todo finish'
                },
                clearMsg() {
                    this.listMsg = [];
                    this.count = 0
                },
                clearTextBox() {
                    this.message = ""; // 清空文本框
                }
            }
        })
    </script>




    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul li {
            list-style: none;
        }

        .clearButton {
            position: absolute;
            right: 15px;
            /* 调整按钮与输入框的距离 */
            top: 25%;
            /* 居中垂直对齐 */
            transform: translateY(-50%);
            background-color: #f44336;
            /* 红色背景 */
            color: white;
            /* 白色文字 */
            border: none;
            /* 没有边框 */
            padding: 10px 20px;
            /* 添加一些内边距 */
            text-align: center;
            /* 文字居中 */
            text-decoration: none;
            /* 没有下划线 */
            display: inline-block;
            /* 行内块元素 */
            font-size: 16px;
            /* 字体大小 */
            border-radius: 5px;
            /* 圆角边框 */
            cursor: pointer;
            /* 鼠标指针样式为手型 */
        }

        .clearButton:hover {
            background-color: #d32f2f;
            /* 鼠标悬停时的背景颜色 */
        }


        .mainZone {
            position: relative;
            width: 580px;
            min-height: 500px;
            margin: 10px auto;
            text-align: center;
            background-color: rgb(189, 221, 176);
            box-shadow: 0 1px 1px rgba(26, 56, 41, 0.2), 0 8px 0 -3px #698870, 0 9px 1px -3px rgb(0 0 0 / 20%), 0 16px 0 -6px #4e6653, 0 17px 2px -6px rgb(0 0 0 / 20%);
        }

        .headZone {
            height: 180px;
            line-height: 80px;
            font-size: 30px;
            font-weight: 400;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', '楷体';
            color: rgb(94, 49, 17);
            text-shadow: 1px 1px 3px rgb(122, 83, 83)
        }

        .textInput {
            padding-right: 1px; /* 留出按钮的空间 */
            width: 400px;
            height: 50px;
            text-indent: 20px;
            font-size: 18px;
            border: none;
            outline: none;
            border-radius: 10px;
            color: rgb(99, 30, 30);
            background-color: rgba(188, 201, 144, 0.6);
        }

        .listZone {
            padding-bottom: 50px;
        }

        .listZone .tips {
            line-height: 200px;
            font-size: 20px;
            text-indent: 10px;
            color: rgb(116, 64, 64, .5);
        }

        .listZone .todo {
            width: 500px;
            height: 40px;
            margin: 5px auto;
            line-height: 40px;
            font-size: 20px;
            text-align: left;
            text-indent: 10px;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', '楷体';
            color: rgb(116, 64, 64);
            cursor: pointer;
            background-color: rgba(188, 201, 144, 0.6);
            border-radius: 10px;
            box-shadow: inset 1px 1px 5px rgba(129, 138, 99, 0.6);
        }

        .listZone .finish {
            text-decoration: line-through;
            background-color: rgba(121, 129, 95, 0.8);
            box-shadow: inset 2px 2px 1px rgb(122, 99, 99);
        }

        .bottleZone {
            position: absolute;
            bottom: 0;
            right: 20px;
            /* width: 100%; */
            height: 50px;
            line-height: 50px;
        }

        .clearbtn {
            color: rgba(179, 120, 120, 0.6);
            font-weight: 400;
            cursor: pointer;
        }

        .countzone {
            margin-right: 400px;
            color: rgba(179, 120, 120, 0.6);
            font-weight: 400;
            cursor: pointer;
        }
    </style>

</body>

</html>