蓝桥web模拟赛：时间管理大师

jayLog

已于 2022-04-01 20:52:56 修改

阅读量2.1k

点赞数 5

分类专栏：蓝桥web js 文章标签： echarts javascript 前端

于 2022-03-30 19:45:21 首次发布

本文链接：https://blog.youkuaiyun.com/jayLog/article/details/123854849

版权

蓝桥web 同时被 2 个专栏收录

29 篇文章

订阅专栏

22 篇文章

订阅专栏

文章目录

时间管理大师
目标：
题目功能罗列：
vue大体结构

1. 添加事件、页面数据和事件绑定
2. 事件实现
3. 完善统计和显示功能
完整的关键代码

时间管理大师

目标：

请在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>