Vue 实现简易记事本

最新推荐文章于 2025-05-01 23:50:39 发布

webWangGe

最新推荐文章于 2025-05-01 23:50:39 发布

阅读量596

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/webWangGe/article/details/118935967

这个博客介绍了一个使用Vue.js实现的简易记事本应用。该应用具有四个核心功能：添加不重复的任务到列表，删除特定任务，清空所有任务，以及实时显示任务总数。代码实现详述了每个功能的细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

预览图：

功能如下：

（1）输入任务并按下回车键，可将任务添加至任务列表（不可输入重复任务）

（2）点击删除，可删除对应任务

（3）点击清空，所有任务都会被删除

（4）左下角同步显示任务总数

完整代码如下：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记事本</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        #todoapp {
            width: 600px;
            background-color: rgba(19, 161, 114, 0.63);
            font-family: sans-serif;
        }
 
        .header>h1 {