蓝桥杯Web：【功能实现】时间管理大师

最新推荐文章于 2024-03-25 23:23:26 发布

淹死的鱼u

最新推荐文章于 2024-03-25 23:23:26 发布

阅读量788

点赞数 3

分类专栏：蓝桥杯Web练习文章标签：蓝桥杯 web

;

本文链接：https://blog.csdn.net/qq_45934504/article/details/123992439

版权

蓝桥杯Web练习专栏收录该内容

11 篇文章 3 订阅

订阅专栏

本博客介绍了如何使用Vue2.x实现一个简易的任务管理器。通过Vue的v-for、v-if、v-model和事件监听等特性，实现了添加任务、删除任务、显示任务总数以及清空任务列表的功能。在实现过程中需要注意当任务列表为空时，‘总数’和‘清除’按钮应隐藏，这一细节是解决此问题的关键。

摘要由CSDN通过智能技术生成

【功能实现】时间管理大师

背景介绍
时间管理永远都是提升工作和学习效率的必备法门，你在平时的工作学习中是否也有做计划和管理计划的习惯呢？

本题需要在已提供的基础项目中使用 Vue.js 知识实现一个简易的任务管理器。

步骤准备
在开始答题前，你需要在线上环境终端中键入以下命令，下载并解压所提供的文件。

wget https://labfile.oss.aliyuncs.com/courses/7835/exam13-imi.zip && unzip exam13-imi.zip && rm exam13-imi.zip
copy
下载完成之后的目录结构如下：

├── css
│   └── style.css # 页面样式文件
├── img
│   └── icon.png # 页面所需小图标
├── index.html # 页面布局即逻辑编码文件
└── js
    └── vue.js # 版本为 2.x 的 Vue.js 框架

源码下载后，选中 index.html 右键启动 Web Server 服务（Open with Live Server），让项目运行起来。

接着，打开环境右侧的【Web 服务】，就可以在浏览器中看到如下效果：

图片描述

当前显示仅有静态布局，并未实现具体功能。

考试要求
请在 index.html 文件中使用默认提供的 DOM 结构（即基础项目提供的 DOM 结构和指定 id 不能改变），使用 Vue 2.x 语法实现任务管理器功能。

具体需求如下：

页面加载后默认显示 “暂无数据”。
最终实现效果如下：

在输入框中输入内容并点击 “确认” 按钮后，将输入内容添加到任务列表。
最终实现效果如下：

新增任务添加在已有任务后面。
最终实现效果如下：

点击每条任务右侧的“删除”图标该任务会从任务列表中移除。
最终实现效果如下：

底部 “总数” 右侧显示当前任务列表中的数量。
最终实现效果如下：

Alt

点击底部的 “清除” 将清空任务列表中的数据，任务列表处恢复 “暂无数据” 的默认显示。
最终实现效果如下：

图片描述

要求规定
请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分。
总通过次数: 168 | 总提交次数: 192 | 通过率: 87.5%

题解

考点：vue：v-for，v-if，on-click点击事件，v-model双向绑定、js数组删除arr.splice()方法

这题不难，但一定要注意看题目呀，当dolist没有数据时，总数与清除按钮应该是不显示的 ，这个点卡了我好久一直没通过，看了题目后才发现emmmm…

<!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 v-model="value" type="text" placeholder="请输入你要做的事"/>
		<span id='add' @click="add">确认</span>
	</div>
</div>

<ul class="list">
  <li v-if="dolist.length === 0">
  	暂无数据
  </li>
	<li v-for="(item, index) in dolist" :key="index">
		<!-- 前面的序号 -->
		<span class="xh">{{ index + 1 }}</span>
		<!-- 列表内容 -->
		<span>{{ item }}</span>
		<!-- 删除按钮 -->
		<span class="qc" @click="del(index)" ></span>
	</li>
	<li v-if="dolist.length !== 0">
		<b>
			总数：{{ dolist.length }}
		</b>
		<b id='clear' @click="clear">清除</b>
	</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
var top= new Vue({
	el:"#box",
  // 在此处补全代码，实现所需功能
  data() {
		return {
			dolist: [],
			value: ""
		}
	},
	methods: {
		add() {
			this.dolist.push(this.value)
		},
		del(index) {
			this.dolist.splice(index, 1)
		},
		clear() {
			this.dolist = []
		}
	}
})
</script>
</body>
</html>