蓝桥web应用开发模拟赛二—Todos时间管理大师

最新推荐文章于 2024-09-11 10:06:17 发布

@共饮长江水

最新推荐文章于 2024-09-11 10:06:17 发布

阅读量266

点赞数 1

本文链接：https://blog.csdn.net/qq_53052372/article/details/123560555

版权

前端蓝桥杯 javascript vue.js

题目：时间管理大师
题目介绍:时间管理永远都是提升工作和学习效率的必备法门，你在平时的工作学习中是否也有做计划和管理计划的习惯呢?

具体需求如下:
1.页面加载后默认显示“ 暂无数据”。
2.在输入框中输入内容并点击“确认” 按钮后，将输入内容添加到任务列表。
3.新增任务添加在已有任务后面。
4.点击每条任务右侧的“删除”图标该任务会从任务列表中移除。
5.底部“总数”右侧显示当前任务列表中的数量。
6.点击底部的“清除”将清空任务列表中的数据，任务列表处恢复“ 暂无数据”的默认显示。

最初的效果：

代码如下所示

<!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="list"/>
          <span id="add" @click="pushlist">确认</span>
        </div>
      </div>

      <ul class="list">
        <li v-show="arry.length==0">暂无数据</li>
        <li v-show="arry.length!=0" v-for="list in arry">
          <!-- 前面的序号 -->
          <span class="xh">{{list.id}}</span>
          <!-- 列表内容 -->
          <span>{{list.name}}</span>
          <!-- 删除按钮 -->
          <span class="qc" @click="remove(list.id)"></span>
        </li>
        <!-- <li>
          <span class="xh">2</span>
          <span>吃饭</span>
          <span class="qc"></span>
        </li>
        <li>
          <span class="xh">3</span>
          <span>睡觉</span>
          <span class="qc"></span>
        </li> -->
        <li>
          <b> 总数：{{arrylength}} </b>
          <b id="clear" @click="removeall">清除</b>
        </li>
      </ul>
    </div>
    <script src="js/vue.js"></script>
    <script>
      var top = new Vue({
        el: "#box",
        // 在此处补全代码，实现所需功能
        data:{
          list:'',
          arry:[]
        },
        computed:{
          arrylength(){
            return this.arry.length;
          }
        },
        methods:{
          pushlist(){
            this.arry.push({id:this.arry.length+1,name:this.list})
            this.list = ''
          },
          remove(id){
            this.arry.splice(id-1,1)
            for(i=0;i<this.arry.length;i++){
            this.arry[i].id=i+1
          }
          },
          removeall(){
            this.arry=[]
          }
        }
      });
    </script>
  </body>
</html>

最后的效果：