vue.js实战案例：实现todolist

最新推荐文章于 2024-07-10 13:45:25 发布

yanya_

最新推荐文章于 2024-07-10 13:45:25 发布

阅读量3.4k

点赞数 4

分类专栏： vue 文章标签： vue todolist

本文链接：https://blog.csdn.net/sinat_32586527/article/details/80799105

版权

本文通过一个Vue.js实战案例，展示如何实现一个功能完善的TodoList应用。页面清晰区分待办事项与已完成事项。代码已提供，可在作者分享的资源中获取完整项目，但需自行处理依赖。

摘要由CSDN通过智能技术生成

具体实现页面如下图所示，分的比较细，将待办事项与未完成事项分开。下面上图↓↓↓↓↓

这里只附上todolist.vue的代码，全部代码可以去我上传的资源中下载，注意我没有上传依赖哦~

下面是todolist.vue的源码↓↓↓↓↓

<template>
  <div class="todolist">
    <Card>
      <div class="topad">
        <p>任务计划表</p>
      </div>
      <div class="main">
        <div class="addlist">
          <p class="text">添加任务</p>
          <Input type="text" v-model="todo" placeholder="请输入待办事项" style="width: 90%;"></Input>
          <Button @click="addTodo(todo)">添加</Button>
        </div>
        <div class="detaillist">
          <ButtonGroup class="taskcount" v