【功能实现】时间管理大师
背景介绍
时间管理永远都是提升工作和学习效率的必备法门，你在平时的工作学习中是否也有做计划和管理计划的习惯呢？
本题需要在已提供的基础项目中使用 Vue.js 知识实现一个简易的任务管理器。
步骤准备
在开始答题前，你需要在线上环境终端中键入以下命令，下载并解压所提供的文件。
1
| wget https://labfile.oss.aliyuncs.com/courses/7835/exam13-imi.zip && unzip exam13-imi.zip && rm exam13-imi.zip
|
下载完成之后的目录结构如下：
1
2
3
4
5
6
7
| ├── 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 语法实现任务管理器功能。
具体需求如下：
- 页面加载后默认显示 “暂无数据”。
最终实现效果如下：
- 在输入框中输入内容并点击 “确认” 按钮后，将输入内容添加到任务列表。
最终实现效果如下：
- 新增任务添加在已有任务后面。
最终实现效果如下：
- 点击每条任务右侧的“删除”图标该任务会从任务列表中移除。
最终实现效果如下：
- 底部 “总数” 右侧显示当前任务列表中的数量。
最终实现效果如下：
- 点击底部的 “清除” 将清空任务列表中的数据，任务列表处恢复 “暂无数据” 的默认显示。
最终实现效果如下：
要求规定
- 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
- 满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分。
总通过次数: 1075 | 总提交次数: 1325 | 通过率: 81.1%
难度: 简单 标签: 2022, 省模拟赛, Web 前端, Vue.js
题解
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
| <!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="请输入你要做的事"
v-model="searchQuery"
/>
<span id="add" @click="confirm">确认</span>
</div>
</div>
<ul class="list">
<li v-if="showList.length === 0">暂无数据</li>
<li v-else v-for="(item,index) in showList">
<span class="xh">{{ index + 1 }}</span>
<span>{{ item }}</span>
<span class="qc" @click="remove(index)"></span>
</li>
<li v-if="showList.length">
<b>
总数：{{showList.length}}
</b>
<b id='clear' @click="clean">清除</b>
</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
var top = new Vue({
el: "#box",
// 在此处补全代码，实现所需功能
data() {
return {
searchQuery: "",
showList: [],
};
},
computed: {},
methods: {
confirm() {
console.log('1');
this.showList.push(this.searchQuery)
this.searchQuery = "";
},
remove(index) {
this.showList.splice(index, 1)
},
clean() {
this.showList = []
}
},
});
</script>
</body>
</html>
|
