蓝桥杯时间管理大师

背景介绍

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

本题需要在已提供的基础项目中使用 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>

希望能帮助到你~

蓝桥杯时间管理大师相关推荐

你离时间管理大师，就差这副眼镜了
鱼羊贾浩楠发自凹非寺量子位报道 | 公众号 QbitAI 你离时间管理大师,只差这副黑科技眼镜了. 只要249美元--1702元人民币. 最近,这款名为Specs的智能眼镜,出现在了众筹网站 ...
学完 CompletionService，可以做时间管理大师？
作者 | why技术来源 | why技术(ID:hello_hi_why) 荒腔走板老规矩,先荒腔走板聊聊其他的. 上面这图是上周六,成都叁缺壹演唱会的现场.正在唱歌的这个男人叫做李志.去年他因为 ...
mybatisplus代码生成器_想做时间管理大师？你可以试试Mybatis Plus代码生成器
1. 前言对于写Crud的老司机来说时间非常宝贵,一些样板代码写不但费时费力,而且枯燥无味.经常有小伙伴问我,胖哥你怎么天天那么有时间去搞新东西,透露一下秘诀呗. 好吧,今天就把Mybatis-pl ...
想参加多人运动?并行流(ParallelStream)模式教你成为时间管理大师
目的提高程序运行效率, 减少响应时间或者增加吞吐量例子代码最近罗*祥, 福报厂P12 jf 引起了大家的关注, 二位都是因为私人生活问题, 搞的微博程序员天天加班加服务器, 让我等吃了一个又一个 ...
想成为时间管理大师？试试番茄工作法！(内含 Python 实现)
这是「进击的Coder」的第 709 篇技术分享作者:Ckend 来源:Python 实用宝典 " 阅读本文大概需要 5 分钟. " 番茄工作法,是一种时间管理方法.掌握了它,或 ...
锁屏界面已由组织隐藏或管理_学会这些冷门电脑使用技巧，你也能当“时间管理大师”...
工作学习过程中,很多不为人知的冷门技巧能够极大地提升办事效率.今天道客君就简单分享一波,学会了你也能上榜成为"时间管理大师". 看完觉得不错可以一键分享.点赞噢--- PART 0 ...
产品经理日常思考复盘：产品经理想做出好产品，先成为时间管理大师
这是小胖的第155篇原创文章.本文2378字,阅读大概需要3分钟 . 作者:小胖 Punkboy ; 编辑:小胖 Punkboy 过去的一段新工作让自己又对产品经理这份工作有了一些不同的思考,趁着 ...
不同时区时间戳是一样的吗_读完预科也能直升二年级？一不小心就成了时间管理大师！...
在规划留学的时候,除了会考虑学校.专业.城市等等以外,很多同学都会考虑到时间. 这个项目要读多少年? 我要去先去法国读一年语言或者预科吗? 毕竟,每多读一年,毕业的时候就再大一岁: 每多读一年,在法国 ...
如何成为时间管理大师？
目的性定义: 做事必须有强烈的目的性,通过目的反推进度,并带有结构导向目的:赚钱和就业两点:1.几乎苛责的管理好自己的时间 2.用极度功利的心态增加自己的可利用价值压榨时间:任何与你的利益诉求 ...

蓝桥杯时间管理大师

背景介绍

步骤准备

解题方法

蓝桥杯时间管理大师相关推荐

最新文章

热门文章

蓝桥杯 时间管理大师

背景介绍

步骤准备

解题方法

蓝桥杯 时间管理大师相关推荐

最新文章

热门文章

蓝桥杯时间管理大师

蓝桥杯时间管理大师相关推荐