当前位置： 首页 > article >正文

蓝桥杯，利用 Vue.js 构建简易任务管理器

article 2026/2/25 7:15:45

在日常开发中，我们经常需要处理各种任务和计划。一个简单且高效的任务管理器可以帮助我们更好地组织和安排时间。今天，我将向大家展示如何使用 Vue.js 构建一个简易的任务管理器。这个项目不仅能够帮助我们更好地理解 Vue.js 的基本语法和功能，还能为我们提供一个实用的小工具。

项目概述

这个任务管理器的主要功能包括：

  1. 添加任务：用户可以在输入框中输入任务内容，并点击“确认”按钮将其添加到任务列表中。

  2. 删除任务：用户可以点击任务旁边的“删除”按钮，将任务从列表中移除。

  3. 清空任务：用户可以点击“清除”按钮，将所有任务一次性清空。

  4. 显示任务总数：在任务列表下方显示当前任务的总数。

vue的在线cdn 

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

HTML 结构

以下是 index.html 的代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>任务管理器</title><link type="text/css" href="css/style.css" rel="stylesheet" /></head><body><div id="box"><div class="head"><h2>Todos</h2><p>罗列日常计划，做一个时间管理大师！</p><div class="input"><span>内容</span><input type="text" placeholder="请输入你要做的事" /><span id="add" @click="add">确认</span></div></div><ul class="list"><li v-if="data.length==0">暂无数据</li><template v-else><li v-for="(item, index) in data" :key="index"><span class="xh">{{ index + 1 }}</span><span>{{ item }}</span><span class="qc" @click="remove(index)"></span></li><li><b>总数：{{ data.length }}</b><b id="clear" @click="clear">清除</b></li></template></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><script>var top = new Vue({el: "#box",data() {return {data: ["吃", "喝"],};},methods: {remove(index) {this.data.splice(index, 1);},clear() {this.data = [];},add() {let inputVal = document.querySelector("input").value;this.data.push(inputVal);},},});</script></body>
</html>

HTML 结构解析

  1. 头部区域：

    • 包含一个标题 Todos 和一段描述文字，提示用户可以在这里罗列日常计划。

    • 一个输入框和一个“确认”按钮，用于添加新的任务。

  2. 任务列表区域：

    • 使用 Vue.js 的 v-for 指令动态生成任务列表。

    • 每个任务项包含序号、任务内容和一个删除按钮。

    • 如果任务列表为空，则显示“暂无数据”。

    • 在任务列表的最后显示当前任务的总数和一个“清除”按钮。

 

Vue.js 逻辑实现

数据部分

JavaScript复制

data() {return {data: ["吃", "喝"],};
}

  • data 是一个数组，用于存储任务列表。初始值包含两个任务：“吃”和“喝”。

方法部分

  1. 添加任务：

    JavaScript复制

    add() {let input = document.querySelector("input");let inputVal = input.value; // 获取输入框的值if (inputVal.trim() !== "") { // 检查输入是否为空this.data.push(inputVal); // 将值添加到任务列表}input.value = ""; // 清空输入框
}

    • 获取输入框的值，并将其添加到 data 数组中。

  2. 删除任务：

    JavaScript复制

    remove(index) {this.data.splice(index, 1);
}

    • 使用 splice 方法从数组中移除指定索引的任务。

  3. 清空任务：

    JavaScript复制

    clear() {this.data = [];
}

    • 将 data 数组清空，从而移除所有任务。

样式设计 

@charset "utf-8"; /* 设置字符编码为UTF-8，确保支持多种字符 */
/* 全局重置样式 */
* {padding: 0; /* 移除所有元素的内边距 */margin: 0; /* 移除所有元素的外边距 */
}/* 列表样式重置 */
ul {list-style: none; /* 移除列表的默认样式（如圆点、数字等） */
}/* 页面背景设置 */
body {background-color: #2d2d2d; /* 设置页面背景颜色为深灰色 */
}/* 任务管理器容器样式 */
#box {width: 800px; /* 设置容器宽度 */margin: 50px auto; /* 上下外边距为50px，左右外边距自动，使容器水平居中 */background-color: #fff; /* 设置容器背景颜色为白色 */box-shadow: 0 0 10px #ccc; /* 添加阴影效果，增强立体感 */border-radius: 5px; /* 设置圆角边框 */overflow: hidden; /* 隐藏超出容器的内容 */
}/* 容器头部样式 */
#box .head {background-color: #DFF0D8; /* 设置头部背景颜色为淡绿色 */padding: 20px; /* 添加内边距 */
}/* 头部标题样式 */
#box .head h2 {color: #3C763D; /* 设置标题颜色为深绿色 */
}/* 头部描述文字样式 */
#box .head p {font-size: 12px; /* 设置字体大小 */color: #3C763D; /* 设置字体颜色为深绿色 */line-height: 30px; /* 设置行高 */
}/* 输入区域样式 */
#box .head .input {height: 30px; /* 设置高度 */line-height: 30px; /* 设置行高，使文字垂直居中 */border-radius: 5px; /* 设置圆角边框 */background-color: #EEEEEE; /* 设置背景颜色为浅灰色 */overflow: hidden; /* 隐藏超出区域 */border: 1px solid #ccc; /* 添加边框 */
}/* 输入区域内的span样式 */
#box .head .input span {display: inline-block; /* 设置为行内块元素 */width: 50px; /* 设置宽度 */height: 30px; /* 设置高度 */text-align: center; /* 文字居中 */font-size: 12px; /* 设置字体大小 */float: left; /* 向左浮动 */
}/* 输入框样式 */
#box .head .input input {float: left; /* 向左浮动 */width: calc(100% - 102px); /* 计算宽度，确保输入框占据剩余空间 */border: none; /* 移除边框 */outline: none; /* 移除焦点时的轮廓 */height: 30px; /* 设置高度 */text-indent: 20px; /* 设置文本缩进 */
}/* 输入区域内的第一个span样式（内容提示） */
#box .head .input span:first-child {border-right: 1px solid #ccc; /* 添加右侧边框 */
}/* 输入区域内的最后一个span样式（添加按钮） */
#box .head .input span:last-child {border-left: 1px solid #ccc; /* 添加左侧边框 */cursor: pointer; /* 设置鼠标指针为手型，表示可点击 */
}/* 任务列表区域样式 */
#box .list {padding: 20px; /* 添加内边距 */
}/* 任务列表项样式 */
#box .list li {border-bottom: 1px dashed #ccc; /* 添加底部虚线边框 */height: 40px; /* 设置高度 */font-size: 14px; /* 设置字体大小 */color: #2D2D2D; /* 设置字体颜色 */
}/* 最后一个列表项样式 */
#box .list li:last-child {line-height: 40px; /* 设置行高 */border-bottom: none; /* 移除底部边框 */padding: 0 20px; /* 添加内边距 */
}/* 列表项内的span样式 */
#box .list li span {float: left; /* 向左浮动 */height: 20px; /* 设置高度 */line-height: 20px; /* 设置行高 */margin: 10px 0; /* 设置上下外边距 */text-align: center; /* 文字居中 */
}/* 列表项内的第一个span样式（序号） */
#box .list li span:first-child {width: 50px; /* 设置宽度 */border-right: 1px solid #ccc; /* 添加右侧边框 */margin-right: 10px; /* 设置右侧外边距 */
}/* 列表项内的最后一个span样式（删除按钮） */
#box .list li span:last-child {width: 30px; /* 设置宽度 */background: url(../img/icon.png) no-repeat center center; /* 设置背景图片 */background-size: 50%; /* 设置背景图片大小 */float: right; /* 向右浮动 */margin-right: 20px; /* 设置右侧外边距 */cursor: pointer; /* 设置鼠标指针为手型 */
}/* 最后一个列表项内的第一个b标签样式（总数提示） */
#box .list li:last-child b:first-child {float: left; /* 向左浮动 */
}/* 最后一个列表项内的最后一个b标签样式（清除按钮） */
#box .list li:last-child b:last-child {float: right; /* 向右浮动 */cursor: pointer; /* 设置鼠标指针为手型 */
}

  1. 全局样式：重置了默认的 padding 和 margin，并移除了列表的默认样式。

  2. 容器样式：设置了任务管理器容器的宽度、背景颜色、阴影和圆角，使其在页面中居中显示。

  3. 头部样式：设置了头部的背景颜色、内边距、标题和描述文字的样式。

  4. 输入区域样式：设计了输入框和按钮的布局，包括宽度计算、边框和浮动。

  5. 任务列表样式：定义了任务列表项的布局、边框、字体大小和颜色。

  6. 特殊样式：为序号、删除按钮、总数提示和清除按钮添加了特定的样式和交互效果。

总结

通过这个简单的任务管理器项目，我们学习了 Vue.js 的基本用法，包括数据绑定、事件处理和条件渲染等功能。这个项目虽然简单，但功能实用，可以作为我们日常任务管理的小工具。同时，它也为初学者提供了一个很好的学习和实践机会，帮助大家更好地理解和掌握 Vue.js 的开发技巧。

如果你对这个项目感兴趣，可以尝试自己动手实现，并根据自己的需求进行扩展和优化。例如，可以为任务添加优先级、设置完成状态、保存任务到本地存储等功能，让任务管理器更加完善和强大。

希望这篇文章对你有所帮助！如果你有任何问题或建议，欢迎在评论区留言交流。

 

相关文章：

蓝桥杯，利用 Vue.js 构建简易任务管理器

在日常开发中&#xff0c;我们经常需要处理各种任务和计划。一个简单且高效的任务管理器可以帮助我们更好地组织和安排时间。今天&#xff0c;我将向大家展示如何使用 Vue.js 构建一个简易的任务管理器。这个项目不仅能够帮助我们更好地理解 Vue.js 的基本语法和功能&#xff0…...

编程日记 2026/2/14 9:03:33

国际机构Gartner发布2025年网络安全趋势

转自&#xff1a;中国新闻网 中新网北京3月14日电 国际机构高德纳(Gartner)14日发布的消息称&#xff0c;网络安全和风险管理在2025年“面临挑战与机遇并存的局面”&#xff0c;“实现转型和提高弹性”对确保企业在快速变化的数字世界中&#xff0c;实现安全且可持续的创新至关…...

编程日记 2025/12/15 21:10:29

【设计模式】单件模式

七、单件模式 单件(Singleton) 模式也称单例模式/单态模式&#xff0c;是一种创建型模式&#xff0c;用于创建只能产生 一个对象实例 的类。该模式比较特殊&#xff0c;其实现代码中没有用到设计模式中经常提起的抽象概念&#xff0c;而是使用了一种比较特殊的语法结构&#x…...

编程日记 2026/2/15 10:14:37

Elasticsearch + Docker：实现容器化部署指南

Elasticsearch是一款强大的分布式搜索和分析引擎&#xff0c;广泛应用于日志分析、全文检索、实时数据分析等场景。而Docker作为一种轻量级的容器化技术&#xff0c;能够帮助开发者快速部署和管理应用。将Elasticsearch与Docker结合&#xff0c;不仅可以简化部署流程&#xff0…...

编程日记 2026/2/23 13:34:33

win32汇编环境,网络编程入门之十一

;win32汇编环境,网络编程入门之十一 ;在上一教程里&#xff0c;我们学习了如何读取大容量的网页内容&#xff0c;在这一教程里&#xff0c;我们学习一下如何在wininet或winhttp机制中提取网页中的超链接 ;>>>>>>>>>>>>>>>>>…...

编程日记 2026/2/15 2:35:13

穿越之程序员周树人的狂人日记Part3__人机共生纪元

穿越之程序员周树人的狂人日记Part3__人机共生纪元 代码知识点&#xff1a;协程、内存管理、版本控制 故事一【协程陷阱】择偶标准的多核运算 故事二【内存泄漏】中产幻觉的垃圾回收 故事三【版本控制】人设仓库的强制推送 故事四【容器化生存】&#xff1a;员工生存之现状 静夜…...

编程日记 2026/2/15 18:06:26

后端——AOP异步日志

需求分析 在SpringBoot系统中&#xff0c;一般会对访问系统的请求做日志记录的需求&#xff0c;确保系统的安全维护以及查看接口的调用情况&#xff0c;可以使用AOP对controller层的接口进行增强&#xff0c;作日志记录。日志保存在数据库当中&#xff0c;为了避免影响接口的响…...

编程日记 2026/2/13 20:32:17

【C#语言】深入理解C#多线程编程：从基础到高性能实践

文章目录 ⭐前言⭐一、多线程的本质价值&#x1f31f;1、现代计算需求&#x1f31f;2、C#线程演进史 ⭐二、线程实现方案对比&#x1f31f;1、传统线程模型&#x1f31f;2、现代任务模型&#xff08;推荐&#xff09;&#x1f31f;3、异步编程范式 ⭐三、线程安全深度解析&…...

编程日记 2026/2/14 18:53:30

第十四章：模板实例化_《C++ Templates》notes

模板实例化 核心知识点解析多选题设计题关键点总结 核心知识点解析 两阶段查找&#xff08;Two-Phase Lookup&#xff09; 原理&#xff1a; 模板在编译时分两个阶段处理&#xff1a; 第一阶段&#xff08;定义时&#xff09;&#xff1a;检查模板语法和非依赖名称&#xff0…...

编程日记 2026/2/14 23:41:21

循环查询指定服务器开放端口(Python)

循环查询指定服务器开放端口列表 # Time : 2025/3/22 # Author : cookie # Desc :import socket import concurrent.futures from datetime import datetime# 设置目标IP和端口范围 target_ip input("请输入目标IP地址: ") start_port int(input("请输入…...

编程日记 2026/2/15 13:45:15

算法 ｜ 蜣螂优化算法原理，引言，公式，算法改进综述，应用场景及matlab完整代码

蜣螂优化算法（Dung Beetle Optimizer, DBO）详解 1. 算法原理 蜣螂优化算法（DBO）是一种基于自然界蜣螂行为的元启发式优化算法，灵感来源于蜣螂的滚球、繁殖、觅食和偷窃行为。其核心思想是通过模拟蜣螂在复杂环境中的协作与竞争机制，解决全局优化问题。关键行为模拟： 滚球…...

编程日记 2026/2/15 20:58:31

排序复习_代码纯享

头文件 #pragma once #include<iostream> #include<vector> #include<utility> using std::vector; using std::cout; using std::cin; using std::endl; using std::swap;//插入排序 //1、直接插入排序&#xff08;稳定&#xff09; void InsertSort(vecto…...

编程日记 2026/2/15 19:12:44

【STM32】第一个工程的创建

目录 1、获取 KEIL5 安装包2、开始安装 KEIL52.1、 激活2.2、安装DFP库 3、工程创建4、搭建框架5、开始编写代码 1、获取 KEIL5 安装包 要想获得 KEIL5 的安装包&#xff0c;在百度里面搜索“KEIL5 下载”即可找到很多网友提供的下载文件&#xff0c;或者到 KEIL 的官网下载&a…...

编程日记 2026/2/17 19:26:30

SpringBoot+策略模式+枚举类，优雅消除if-else

需求分析 公司做物联网系统的&#xff0c;使用nettry进行设备连接&#xff0c;对设备进行数据采集&#xff0c;根据设备的协议对数据进行解析&#xff0c;解析完成之后存放数据库&#xff0c;但是不同厂家的设备协议不同。公司系统使用了使用了函数式编程的去写了一个解析类&am…...

编程日记 2026/2/19 4:47:10

前端框架学习路径与注意事项

学习前端框架是一个系统化的过程&#xff0c;需要结合理论、实践和工具链的综合掌握。以下是学习路径的关键方面和注意事项&#xff1a; 一、学习路径的核心方面 1. 基础概念与核心思想 组件化开发&#xff1a;理解组件的作用&#xff08;复用性、隔离性&#xff09;、组件通信…...

编程日记 2026/2/16 8:26:21

kubeval结合kube-score实现k8s yaml文件校验

一、工具定位与互补性 工具核心能力检查范围kubeval校验 YAML 语法和 API 版本兼容性确保资源配置符合 Kubernetes 版本规范kube-score检查安全配置与最佳实践识别资源限制缺失、权限过高等问题 协同作用&#xff1a; kubeval 确保配置文件的语法正确性&#xff0c;避免低级错…...

编程日记 2026/2/15 4:09:41

Linux驱动开发-①platform平台②MISC字符驱动框架③input框架

Linux驱动开发-①platform平台②MISC字符驱动框架③input框架 一&#xff0c;platform1.1 platform框架&#xff08;设备树下&#xff09;1.2 platform框架&#xff08;配置设备函数&#xff09; 二&#xff0c;MISC字符驱动框架三&#xff0c;input框架 一&#xff0c;platfor…...

编程日记 2026/2/16 11:28:39

【mysql】唯一性约束unique

文章目录 唯一性约束 1. 作用2. 关键字3. 特点4. 添加唯一约束5. 关于复合唯一约束 唯一性约束 1. 作用 用来限制某个字段/某列的值不能重复。 2. 关键字 UNIQUE3. 特点 同一个表可以有多个唯一约束。唯一约束可以是某一个列的值唯一&#xff0c;也可以多个列组合的值唯…...

编程日记 2026/2/17 21:14:31

pytest的测试报告allure

1、安装jdk，安装allure、下载allure，配置环境变量 1.1、下载地址：https://repo.maven.apache.org/maven2/io/qameta/allure/allurecommandline 找到最新版本下载即可 【下载zip包】解压到任意目录，建议目录不要在C盘 不要太深 最好不要有中文；进入allure解压后的目录，找到…...

编程日记 2026/2/14 20:48:36

常见中间件漏洞：Jboss篇

CVE-2015-7501 环境搭建 cd vulhub-master/jboss/JMXInvokerServlet-deserialization docker-compose up -d 过程 访问网址&#xff0c;存在页面说明接口存在且存在反序列化漏洞 http://8.130.17.222:8080/invoker/JMXInvokerServlet 2.下载 ysoserial ⼯具进⾏漏洞利⽤…...

编程日记 2026/2/15 19:08:25

2025年优化算法：龙卷风优化算法（Tornado optimizer with Coriolis force，TOC）

龙卷风优化算法&#xff08;Tornado optimizer with Coriolis force&#xff09;是发表在中科院二区期刊“ARTIFICIAL INTELLIGENCE REVIEW”&#xff08;IF&#xff1a;11.7&#xff09;的2025年智能优化算法 01.引言 当自然界的狂暴之力&#xff0c;化身数字世界的智慧引擎&…...

编程日记 2026/2/15 23:21:09

3.24-3 接口测试断言

一.postman 断言 1.断言再test中 #状态码是否等于200 tests["Status code is 200"] responseCode.code 200; #断言响应时间小于200ms tests["Response time is less than 200ms"] responseTime < 200; #断言响应体包含内容 tests["Body…...

编程日记 2026/2/15 16:17:48

DeepSeek面试——模型架构和主要创新点

本文将介绍DeepSeek的模型架构多头潜在注意力&#xff08;MLA&#xff09;技术&#xff0c;混合专家&#xff08;MoE&#xff09;架构&#xff0c; 无辅助损失负载均衡技术&#xff0c;多Token 预测&#xff08;MTP&#xff09;策略。 一、模型架构 DeepSeek-R1的基本架构沿用…...

编程日记 2026/2/16 9:26:50

【PostgreSQL】pg各版本选用取舍逻辑与docker安装postgres:15

企业常用 PostgreSQL 版本推荐 1. PostgreSQL 14&#xff08;最常见&#xff0c;稳定&#xff09; 目前许多企业仍在使用 PostgreSQL 14&#xff0c;因为它在性能、并发处理、JSON 支持等方面做了较多优化&#xff0c;同时又非常稳定。官方支持时间&#xff1a;2026 年 11 月…...

编程日记 2026/2/15 0:59:48

Python----计算机视觉处理（Opencv:图像亮度变换)

一、图像亮度变换 亮度调整&#xff1a;图像像素强度整体变高或者变低。 对比度调整&#xff1a;图像暗处像素强度变低&#xff0c;图像亮处像素强度变高&#xff0c;从而拉大中间某个区域范围的显示精 度。 A&#xff1a;原图 …...

编程日记 2026/2/15 0:29:52

无人机动平衡-如何在螺旋桨上添加或移除材料

平衡无人机螺旋桨是一项精细的工作&#xff0c;直接影响飞行稳定性和组件寿命。不同的方法适用于不同的情况&#xff0c;螺旋桨的材料和尺寸以及所需调整的幅度都会影响选择的方法。 本文将深入探讨添加如胶水和胶带等材料的方法&#xff0c;以及通过打磨和修剪来移除质量的方…...

编程日记 2026/2/15 13:36:25

基于python的租房网站-房屋出租租赁系统（python+django+vue）源码+运行步骤

该项目是基于python/django/vue开发的房屋租赁系统/租房平台&#xff0c;作为本学期的课程作业作品。欢迎大家提出宝贵建议。给师弟开发的课程作业&#xff0c;技术学习可以留言哦 功能介绍 平台采用B/S结构&#xff0c;后端采用主流的PythonDjango进行开发&#xff0c;前端采…...

编程日记 2026/2/14 2:06:45

C++ 的 if-constexpr

1 if-constexpr 语法 1.1 基本语法 ​ if-constexpr 语法是 C 17 引入的新语法特性&#xff0c;也被称为常量 if 表达式或静态 if&#xff08;static if&#xff09;。引入这个语言特性的目的是将 C 在编译期计算和求值的能力进一步扩展&#xff0c;更方便地实现编译期的分支…...

编程日记 2026/2/15 2:07:01

涨薪技术|k8s设计原理

01k8s介绍 Kubernetes 是一个可移植、可扩展的开源平台&#xff0c;用于管理容器化 工作负载和服务&#xff0c;有助于实现声明性配置和自动化。它有一个庞大、快速增长的生态系统。Kubernetes 服务、支持和工具广泛可用。Kubernetes 这个名字起源于希腊语&#xff0c;意思是舵…...

编程日记 2026/2/21 5:34:54

基于FPGA的16QAM+帧同步系统verilog开发,包含testbench,高斯信道,误码统计,可设置SNR

目录 1.算法仿真效果 2.算法涉及理论知识概要 2.1 16QAM调制解调原理 2.2 帧同步 3.Verilog核心程序 4.完整算法代码文件获得 1.算法仿真效果 vivado2019.2仿真结果如下&#xff08;完整代码运行后无水印&#xff09;&#xff1a; 设置SNR12db 将FPGA数据导入到MATLAB显…...

编程日记 2026/2/15 14:56:16