基于Vue的任务清单（To Do List）

最新推荐文章于 2024-04-29 18:09:02 发布

士芝凛冬

最新推荐文章于 2024-04-29 18:09:02 发布

阅读量1.2k

点赞数 2

分类专栏： Javascript HTML 文章标签： vue html javascript css

本文链接：https://blog.csdn.net/minervalingxian/article/details/111278128

版权

本代码的部分功能借鉴了https://blog.csdn.net/lhjuejiang/article/details/81040236

界面展示

功能描述

1.增：输入框中编辑后点击“添加任务”按钮或者回车将新任务添加到任务展示区顶部。当输入为空不添加（空格认为有字符），输入已有任务会在右上角提示任务重复不可添加（有空格认为是两个任务）。

2.删：点击下方任务展示区域右侧的“x”按钮进行删除当前任务操作。

3.改：双击任务区域某条任务可进行修改，重复则右上角进行提示且继续修改（有空格认为是两个任务）。

4.查：仅限于“所有任务”、“未完成”及“已完成”状态的展示，目前没有针对关键字进行查找的功能。当任务为空时，右上角提示“尚未添加任何任务”。状态的展示基于元素是否展示改变。

5.点击复选框改变完成状态。

6.简单的持久化：本地存储
localStorage.setItem(key,JSON.stringify(value));    //保存数据
JSON.parse(localStorage.getItem(key))    //获取数据

代码实现

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" href="todostyle.css"></link>
</head>
<body>

<div id="app" v-cloak>

  <div id="titlediv"><div id="tmdiv"><h3>To · Do</h3><p>{
  {info}}</p></div></div>

  <div id="inputdiv">
    <input class="ainput"
           autofocus
           type="text"
           placeholder="点击按钮或回车添加任务"
           @keyup.enter="enterFn"
           v-model="todo">
    <button class="ibut" @click="enterFn">添加任务&

最低0.47元/天解锁文章

士芝凛冬

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
基于Vue的任务清单（To Do List）

本代码的部分功能借鉴了https://blog.csdn.net/lhjuejiang/article/details/81040236界面展示：实现的功能：1.增：输入框中编辑后点击“添加任务”按钮或者回车将新任务添加到任务展示区顶部。当输入为空不添加（空格认为有字符），输入已有任务会在右上角提示任务重复不可添加（有空格认为是两个任务）。2.删：点击下方任务展示区域右侧的“x”按钮进行删除当前任务操作。3.改：双击任务区域某条任务可进行修改，重复则右上角进行提示且继续修改（有空格
复制链接

扫一扫