蓝桥杯练习08时间管理大师

admin • • 研发管理

时间管理大师

介绍

时间管理永远都是提升工作和学习效率的必备法门，你在平时的工作学习中是否也有做计划和管理计划的习惯呢？
本题需要在已提供的基础项目中使用Vue.jS知识实现一个简易的任务管理器。

准备

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：

其中：
·css/style.css是页面样式文件。
·img/icon.png是页面所需小图标。
·js/vue.js是版本为2.x的Vue.js框架。
·index.html是页面布局即逻辑编码文件。
在浏览器中预览index.html页面效果如下：

当前显示仅有静态布局，并未实现具体功能。

目标

请在index.html文件中使用默认提供的DOM结构（即基础项目提供的DOM结构和指定id不能改变)，并用ue2.x语法实现任务管理器功能。
具体需求如下：
1.页面加载后默认显示“暂无数据”。
2.在输入框中输入内容并点击“确认”按钮后，将输入内容添加到任务列表。
3.新增任务添加在已有任务后面。
4.点击每条任务右侧的“删除”图标该任务会从任务列表中移除。
5.底部“总数”右侧显示当前任务列表中的数量。
6.点击底部的“清除”将清空任务列表中的数据，任务列表处恢复“暂无数据”的默认显示。
最终效果【请通过浏览器查看素材文件夹中的effect…gif】

代码

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

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

</html>

答案

    <script>
        var top = new Vue({
            el: "#box",
            // 在此处补全代码，实现所需功能
            data: {
                list: [],
                text: ''
            },
            methods: {
               add(){
                    this.list.push(this.text)
                    this.text=''
               },
               remove(index){
                    this.list.splice(index)
               },
               clear(){
                   this.list=[]
               }
            }
        });
    </script>

知识点

读题可知补全添加、移除列表、清空列表这三个方法就可以了。主要是vue.js的运用和列表的方法使用。

扩展

Vue的数据响应式特性构建处理列表的各种方法。这里提及的是Vue中与列表操作紧密相关的几个方面：

  1. 列表渲染（v-for）：

    • 使用

      v-for

      指令根据数据数组动态渲染列表元素。

      Html

      <ul>
  <li v-for="(item, index) in list" :key="item.id">
    {{ item.value }}
  </li>
</ul>

    在这个例子中，list是一个数组，v-for会遍历数组并为每个元素创建一个列表项。

  2. Vue实例中的数组方法：

    • Vue能够检测到数组的变化，并且自动更新视图，只要使用了Vue提供的数组变异方法，如：
      • push(): 向数组末尾添加一个或多个元素。
      • pop(): 删除数组最后一个元素并返回该元素。
      • shift(): 删除数组第一个元素并返回该元素。
      • unshift(): 向数组开头添加一个或多个元素，并返回新的长度。
      • splice(): 改变数组内容，可以从数组中添加或删除项目。
      • sort(): 对数组进行排序。
      • reverse(): 反转数组的元素顺序。

  3. 过滤、映射、重组等操作：

    • 你可以使用JavaScript原生方法（如.filter()、.map()、.reduce()等）对Vue实例中的数组进行操作，但在改变数组时，需要确保使用上述变异方法以触发视图更新。

  4. 计算属性与侦听器：

    • 当需要基于原始列表计算新的显示列表时，可以使用计算属性 (computed)。
    • 当需要在数组变化时执行特定逻辑，可以设置侦听器 (watch)。

例如，在Vue组件中可能会有这样一段代码用来监听并处理列表的变化：

Javascript

export default {
  data() {
    return {
      originalList: [...]
    };
  },
  computed: {
    filteredList() {
      return this.originalList.filter(item => item.isActive);
    }
  },
  watch: {
    originalList(newList) {
      // 当原始列表发生变化时执行某些逻辑
    }
  }
}

computed: {
filteredList() {
return this.originalList.filter(item => item.isActive);
}
},
watch: {
originalList(newList) {
// 当原始列表发生变化时执行某些逻辑
}
}
}

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
分享
二维码
)">
< <上一篇
下一篇>>