[toc]
时间管理大师
目标：
请在index . html文件中使用默认提供的DOM结构(即基础项目提供的DOM结构和指定id不能
改变)，并用 Vue 2.x语法实现任务管理器功能。
具体需求如下:
-
页面加载后默认显示“ 暂无数据”。
-
在输入框中输入内容并点击“确认” 按钮后，将输入内容添加到任务列表。
-
新增任务添加在已有任务后面。
-
点击每条任务右侧的“删除”图标该任务会从任务列表中移除。
-
底部“总数”右侧显示当前任务列表中的数量。
-
点击底部的“清除” 将清空任务列表中的数据，任务列表处恢复“暂无数据” 的默认显示。
最终效果[请通过浏览器查看素材文件夹中的【effect.gif 】
题目功能罗列：
- 添加事件、页面数据和事件绑定 2. 实现事件 3. 完善统计和显示功能
事件的话，除了点击，还有一个键盘回车事件，虽然文档没说明，但是演示有因此我们就加。
vue大体结构
var top = new Vue({
el: "#box",
// 在此处补全代码，实现所需功能
data:{
newEvent:'',
eventList:[]
},
methods:{
clean(){
},
del(index){
},
add(){
},
}
});
newEvent用于记录输入框的内容，eventList保存事件列表
1. 添加事件、页面数据和事件绑定
<div id="box">
<div class="head">
<h2>Todos</h2>
<p>罗列日常计划，做一个时间管理大师！</p>
<div class="input" >
<span>内容</span>
<!-- @keyup.enter 监听键盘回车事件 -->
<input type="text" @keyup.enter="add" v-model="newEvent" placeholder="请输入你要做的事" />
<span id="add" @click="add">确认</span>
</div>
</div>
<ul class="list">
<li v-if="eventList.length == 0">暂无数据</li>
<li v-for="(item,index) in eventList" :key="index">
<!-- 前面的序号 -->
<span class="xh">{{index+1}}</span>
<!-- 列表内容 -->
<span>{{item}}</span>
<!-- 删除按钮 -->
<span class="qc" @click="del(index)"></span>
</li>
<li v-if="eventList.length >= 1">
<b> 总数：{{eventList.length}} </b>
<b id="clear" @click="clean">清除</b>
</li>
</ul>
</div>
2. 事件实现
var top = new Vue({
el: "#box",
// 在此处补全代码，实现所需功能
data:{
newEvent:'',
eventList:[]
},
methods:{
clean(){
this.eventList = []
},
del(index){
this.eventList.splice(index,1)
},
add(){
this.eventList.push(this.newEvent)
this.newEvent = ''
},
}
});
删除功能的话直接通过数组函数aplice(索引,删除元素个数)来删除事件。遍历的时候把索引带上
清空的话简单，直接把元素初始化即可。
3. 完善统计和显示功能
统计的话有三个部分了：
- 事件列表。直接
v-for遍历，没啥可说的 - 有数据时的事件总数：直接用
eventList.length,用v-if="eventList.length >= 1"判断是否有事件即可 - 没数据时的无数据提示：同样用
v-if="eventList.length != 0"即可
完整的关键代码
<!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" @keyup.enter="add" v-model="newEvent" placeholder="请输入你要做的事" />
<span id="add" @click="add">确认</span>
</div>
</div>
<ul class="list">
<li v-if="eventList.length == 0">暂无数据</li>
<li v-for="(item,index) in eventList" :key="index">
<!-- 前面的序号 -->
<span class="xh">{{index+1}}</span>
<!-- 列表内容 -->
<span>{{item}}</span>
<!-- 删除按钮 -->
<span class="qc" @click="del(index)"></span>
</li>
<li v-if="eventList.length >= 1">
<b> 总数：{{eventList.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:{
newEvent:'',
eventList:[]
},
methods:{
clean(){
this.eventList = []
},
del(index){
this.eventList.splice(index,1)
},
add(){
this.eventList.push(this.newEvent)
this.newEvent = ''
},
}
});
</script>
</body>
</html>