时间管理大师

最新推荐文章于 2024-04-29 21:35:15 发布

Rainbow一定行

最新推荐文章于 2024-04-29 21:35:15 发布

阅读量1.6k

点赞数

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

本文链接：https://blog.csdn.net/weixin_51167834/article/details/123869363

版权

蓝桥杯web模拟赛专栏收录该内容

3 篇文章 0 订阅

订阅专栏

用vue实现一个 TodoList

实现效果：

实现代码：

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

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

1、实现输入内容数据的绑定（用v-model），以及点击按钮事件的绑定

将输入框输入的内容，绑定在data中，添加用push方法将事件加到todoList中，添加后还要将inputdata清空

2、新增任务添加在已有任务后面，通过v-for渲染数据

3、页面加载后显示“暂无数据”，即todoList的长度为零时，显示

总数是todoList非空时显示

4、点击“删除”，任务从列表中移除

给删除按钮，绑定事件，并且传入相应的index值

使用splice方法，删除数组中相应数据

Array.splice()方法

5、底部总数的显示，就是todoList的长度

6、底部的清楚，清楚全部

绑定事件，并且将todoList置空

Rainbow一定行

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
时间管理大师

用vue实现一个 TodoList实现效果：实现代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>任务管理器</title> <link type="text/css" href="css/style.css" rel="stylesheet" /> </head> &l
复制链接

扫一扫