蓝桥杯时间管理大师

迪丽热巴326

已于 2023-03-06 21:25:54 修改

阅读量208

点赞数

分类专栏：蓝桥杯文章标签：前端蓝桥杯 vue.js

于 2023-03-06 21:19:28 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_59379323/article/details/129370849

版权

蓝桥杯专栏收录该内容

3 篇文章

订阅专栏

背景介绍

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

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

步骤准备

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

wget https://labfile.oss.aliyuncs.com/courses/7835/exam13-imi.zip && unzip exam13-imi.zip && rm exam13-imi.zip

下载完成之后的目录结构如下：

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

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

解题方法

1.使用到vue的一些原生方法：v-if,v-for,v-model,@cilck点击事件，

2，数组中使用到的方法：push-在数组末尾添加一条数据，splice-根据下标来删除数据，清空所有数组可以有重置数组，用splice(index)删除所有，给数组的长度设为0 arr.length=0;

tips:vue中是data不是date函数

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

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

希望能帮助到你~