Vue案例之实现ToDolist

最新推荐文章于 2023-08-10 10:19:27 发布
最新推荐文章于 2023-08-10 10:19:27 发布
阅读量520 收藏 5
点赞数 1
分类专栏： Vue 文章标签： vue css3 前端 javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/k464746/article/details/104976569
版权

文章目录

本案例用到了SUI库搭建布局页面,点击进入官网查看使用教程并下载文件使用,也可以自己完成页面布局

实现效果

1.按回车键输入内容,并清空输入框
2.将输入框中内容添加到代办事项中
3.点击切换按钮,可以改变事件状态,待办事项<==>已完成
4.记录代办事项和已完成事项的数量值
5.点击删除,弹出弹框,点击确定删除,点击空白取消弹框
6.点击清空删除所有内容
7.将数据存储到本地,刷新或者重新打开页面后数据不消失.利用localstorage
8.点击底部切换按钮,切换不同页面
在这里插入图片描述

核心思想

  • 先判断localstorage中是否有之前存储的内容
  • 如果有就得到这个数据,没有就设置初始为空数组
let doJson = localStorage.getItem('todolist')
let arrDo = null
if (doJson) {
    arrDo = JSON.parse(doJson)

} else {
    arrDo = []
}
  • all数组存储所有数据,todo代办事项数组,done已完成事项数组,
  • 监听all所有数据的变化,数据一旦发生改变todo done数组中的数据也发生改变
  • 数据改变之后将数据存储到localstorage中
new Vue({
    el: "#app",

    data: {
        //所有数据存到all数组中
        all: arrDo,
        //代办事项
        todo:[],
        // 已完成
        done:[],
        isShow: false,
        msg: "",
    },
    watch: {    //监听  all  数组变化
        all:{
            immediate:true,
            handler(){
                // all  数组一旦变化  todo  done 数组内容也改变
                this.todo=this.all.filter(item=>item.isFinish!=true)
                this.done=this.all.filter(item=>item.isFinish!=false)
        
                localStorage.setItem('todolist',JSON.stringify(this.all))
            }
        },
    },
    methods: {
     //要添加的函数
    }
})
  • 输入框实现
 <input type="search" id='search' placeholder='输入代办事项...' @keyup.enter='add' v-model="msg" />

 methods: {
        // 输入代办事项
        add() {
            this.all.push({
                //利用时间戳来作为id  不会重复
                id: new Date,
                //输入框内容  利用 v-model
                title: this.msg,
                //确定完成按钮的状态  
                isFinish: false
            })
            //输入完成后清空 输入框内容
            this.msg = ''
        }
  • 清空按钮实现
  <p @click="clear"><a href="#" class="button button-round">清空</a></p>

methods: {
        // 清空
        clear() {
            this.all = []
        }
      }
  • 代办事项数量的实现
  • 已完成事项数量的实现类似
 <div class="content-block-title">代办事项 <span class="numTodo">{{todo.length}}</span></div>
  • 代办事项的实现
  • 已完成事项的实现与之一样,只是将数据来源换成done数组
 <div class="card-content">
                    <!-- text -->
                    <div class="card-content-inner">{{item.title}}</div>
                    <!-- btn -->
                    <div class="btn">
                        <!-- do -->
                        <p><a href="#" class="button button-success icon icon-check" :class="{select:item.isFinish}"
                                @click="Check(item.id,item.isFinish)"></a></p>
                        <!-- remove -->
                        <p><a href="#" class="button button-danger icon icon-remove" @click="Remove(item.id)"></a>
                        </p>
                    </div>
                </div>

methods: {
        //改变事件状态  待办事项<=>已完成
        Check(id, isFinish) {
            this.all = this.all.filter(item => {
                if (item.id === id) {
                    item.isFinish = !isFinish
                }
                return true
            })
        },
        // 点击删除按钮  然后显示弹出框
        Remove(id) {
            this.id = id
            this.isShow = true
        }
    }
  • 弹出框的实现
 <div class="device-content" v-if="isShow" @click="isShow=false">
            <div class="modal modal-in" style="display: block; margin-top: -72px;">
                <div class="modal-inner">
                    <div class="modal-text">确定要删除此项吗?</div>
                </div>
                <div class="modal-buttons ">
                    <span class="modal-button modal-button-bold" @click="Removedo(id)">确定</span>
                </div>
            </div>
            <div class="modal-overlay modal-overlay-visible"></div>
        </div>

    methods: {
        //点击弹出框确定删除
        Removedo(id) {
            this.all = this.all.filter(item => item.id != id)
        }
    }
  • 切换不同页面的实现
  • 点击不同的按钮时控制,待办事项与已完成事项的显示与否
  • 并切换按钮颜色

  <div class="todo" v-show="isTodo">
<!-- 中间代码省略  -->
 </div>
   <div class="todo" v-show="isDone">
<!-- 中间代码省略  -->
 </div>
 <nav class="bar bar-tab">
            <a class="tab-item external" href="#" v-for="item in nav" :class="item.class3" @click="Color(item.id)">
                <span :class="[item.class1,item.class2]"></span>
                <span class="tab-label">{{item.title}}</span>
            </a>
  </nav>

new Vue({
    el: "#app",
    data: {
        //切换页面数据
        nav: [
            { id: 1, class1: "icon", class2: "icon-home", class3: "color", title: "首页" },
            { id: 2, class1: "icon", class2: "icon-edit", title: "未完成" },
            { id: 3, class1: "icon", class2: "icon-emoji", title: "已完成" },
        ],
        //待办事项 已完成事项 是否显示
        isTodo: true,
        isDone: true,
    },
    methods: {
        Color(id) {
            //点击按钮样式改变
            this.nav = this.nav.filter(item => {
                if (item.id === id) {
                    item.class3 = "color"
                    return true
                } else {
                    item.class3 = ""
                    return true
                }
            })
            //点击按钮切换页面
            switch (id) {
                case 1: this.isTodo = true, this.isDone = true
                    break;
                case 2: this.isTodo = true, this.isDone = false
                    break;
                case 3: this.isTodo = false, this.isDone = true
                break;
            }
        },
    }
})

程序代码

  • html代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    [v-cloak] {
        display: none;
    }

    /* 按钮样式 */
    .btn {
        display: flex;
        justify-content: flex-end;
        margin-top: 10px;
    }

    .btn p {
        margin: 5px 5px;
    }

    #app .select {
        background: rgb(10, 94, 10);
    }

    /* 标题样式 */
    .content-block-title {
        font-weight: bold;
    }

    /* 显示数量样式 */
    .numTodo {
        color: skyblue;
        float: right;
        font-weight: 900;
    }

    .numdo {
        color: rgb(255, 136, 156);
        float: right;
        font-weight: 900;
    }

    #app .clear {
        margin: 0;
    }

    /* 切换不同页面的样式 */
    #app .color {
        color: skyblue;
    }
</style>

<link rel="stylesheet" href="./sui-mobile/dist/css/sm.min.css">
<link rel="stylesheet" href="./sui-mobile/dist/css/sm-extend.min.css">

<body>
    <div id="app" v-cloak>

        <!-- 顶部 -->
        <!-- head start -->
        <header class="bar bar-nav">
            <a class="icon icon-left pull-left"></a>
            <a class="icon icon-refresh pull-right"></a>
            <h1 class="title">ToDolist</h1>
        </header>
        <!-- head end -->

        <!-- 输入框 -->
        <!-- input start-->
        <div class="bar bar-header-secondary">
            <div class="searchbar">
                <div class="search-input">
                    <input type="search" id='search' placeholder='输入代办事项...' @keyup.enter='add' v-model="msg" />
                </div>
            </div>
        </div>
        <!-- input end -->


        <!-- content -->
        <div class="content">

            <!-- 清空按钮 -->

            <!-- clear -->
            <div class="content-block clear">
                <p @click="clear"><a href="#" class="button button-round">清空</a></p>
            </div>

            <!-- 代办事项 -->

            <!-- todo start -->
            <div class="todo" v-show="isTodo">
                <div class="content-block-title">代办事项 <span class="numTodo">{{todo.length}}</span></div>

                <!-- todo card -->
                <div class="card" v-for="item in todo">
                    <div class="card-content">
                        <!-- text -->
                        <div class="card-content-inner">{{item.title}}</div>
                        <!-- btn -->
                        <div class="btn">
                            <!-- do -->
                            <p><a href="#" class="button button-success icon icon-check" :class="{select:item.isFinish}"
                                    @click="Check(item.id,item.isFinish)"></a></p>
                            <!-- remove -->
                            <p><a href="#" class="button button-danger icon icon-remove" @click="Remove(item.id)"></a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- todo end -->

            <!-- 已完成 -->

            <!-- donestart -->
            <div class="done" v-show="isDone">
                <div class="content-block-title">已完成 <span class="numdo">{{done.length}}</span></div>

                <!--  done card -->
                <div class="card " v-for="item in done">
                    <div class="card-content">
                        <!-- text -->
                        <div class="card-content-inner">{{item.title}}</div>
                        <!-- btn -->
                        <div class="btn">
                            <!-- do -->
                            <p><a href="#" class="button button-success icon icon-check"
                                    :class="{'select':item.isFinish}" @click="Check(item.id,item.isFinish)"></a></p>
                            <!-- remove -->
                            <p><a href="#" class="button button-danger icon icon-remove" @click="Remove(item.id)"></a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- done end -->

        <!-- content end -->

        <!-- 弹出框 -->

        <!-- alert start-->
        <div class="device-content" v-if="isShow" @click="isShow=false">
            <div class="modal modal-in" style="display: block; margin-top: -72px;">
                <div class="modal-inner">
                    <div class="modal-text">确定要删除此项吗?</div>
                </div>
                <div class="modal-buttons ">
                    <span class="modal-button modal-button-bold" @click="Removedo(id)">确定</span>
                </div>
            </div>
            <div class="modal-overlay modal-overlay-visible"></div>
        </div>
        <!-- alert end -->



        <!-- 切换页面 -->
        <!-- nav start -->
        <nav class="bar bar-tab">
            <a class="tab-item external" href="#" v-for="item in nav" :class="item.class3" @click="Color(item.id)">
                <span :class="[item.class1,item.class2]"></span>
                <span class="tab-label">{{item.title}}</span>
            </a>
        </nav>
        <!-- nav end -->
    </div>



    <script src="./base/vue.js"></script>
    <script src="./todo.js"></script>
</body>

</html>
  • JavaScript代码

let doJson = localStorage.getItem('todolist')
let arrDo = null
if (doJson) {
    arrDo = JSON.parse(doJson)

} else {
    arrDo = []
}

new Vue({
    el: "#app",

    data: {
        //所有数据存到all数组中
        all: arrDo,
        //切换页面数据
        nav: [
            { id: 1, class1: "icon", class2: "icon-home", class3: "color", title: "首页" },
            { id: 2, class1: "icon", class2: "icon-edit", title: "未完成" },
            { id: 3, class1: "icon", class2: "icon-emoji", title: "已完成" },
        ],
        //切换页面后按钮样式改变
        isColor: false,
        //代办事项
        todo: [],
        // 已完成
        done: [],
        //弹出框是否显示
        isShow: false,
        //待办事项 已完成事项 是否显示
        isTodo: true,
        isDone: true,
        //输入框双向绑定
        msg: "",
    },
    watch: {    //监听  all  数组变化
        all: {
            immediate: true,
            handler() {
                // all  数组一旦变化  todo  done 数组内容也改变
                this.todo = this.all.filter(item => item.isFinish != true)
                this.done = this.all.filter(item => item.isFinish != false)

                localStorage.setItem('todolist', JSON.stringify(this.all))
            }
        },
    },
    methods: {
        // 输入代办事项
        add() {
            if (!this.msg) {
                return
            }
            this.all.push({
                //利用时间戳来作为id  不会重复
                id: new Date,
                //输入框内容  利用 v-model
                title: this.msg,
                //确定完成按钮的状态  
                isFinish: false
            })
            //输入完成后清空 输入框内容
            this.msg = ''
        },
        // 清空
        clear() {
            this.all = []
        },
        //改变事件状态  待办事项<=>已完成
        Check(id, isFinish) {
            this.all = this.all.filter(item => {
                if (item.id === id) {
                    item.isFinish = !isFinish
                }
                return true
            })
        },
        // 点击删除按钮  然后显示弹出框
        Remove(id) {
            this.id = id
            this.isShow = true
        },
        //点击弹出框确定删除
        Removedo(id) {
            this.all = this.all.filter(item => item.id != id)
        },
        //点击页面切换按钮样式改变   并切换不同页面
        Color(id) {
            //点击按钮样式改变
            this.nav = this.nav.filter(item => {
                if (item.id === id) {
                    item.class3 = "color"
                    return true
                } else {
                    item.class3 = ""
                    return true
                }
            })
            //点击按钮切换也页面
            switch (id) {
                case 1: this.isTodo = true, this.isDone = true
                    break;
                case 2: this.isTodo = true, this.isDone = false
                    break;
                case 3: this.isTodo = false, this.isDone = true
                break;
            }
        },
    }
})
前端魔法师
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue实现简单ToDolist案例
Huang_DW的博客
07-01 434
Vue实现简单ToDolist案例 <template> <div> <div> <input type="text" v-model="inputValue" @keydown.enter="add"> <span @click="shaix" style="cursor: pointer;">筛选</span> <h3>正在进行({{noList}})</h3&
Vue 写todolist小案例
weixin_46535287的博客
08-22 506
todolist – 记录你的待办事项 目录整体结构大概就是这样,app.js是入口 头部的代码 添加了回车事件 我这边使用v-model绑定数据,也可以使用event事件 中间部分 list文件主要使用传值 这个文件相当于中间件 item.vue 这个文件是li文件,这个文件接收从app中传过来的数据 完成删除操作等 footer文件 这个文件主要完成 清除任务 全选以及全不选 接收app传过来的值 app文件...
Vue TodoList完整案例
09-05
案例根据 http://todomvc.com/examples/vue/ 编写 完成功能：完成了所有的功能，如：添加、双击修改、ESC键取消编辑、清除所有已完成任务、一键全选任务、自动聚焦，本地保存等等。
Vue.js TodoList案例
LitongZero的博客
09-02 1711
案例根据 http://todomvc.com/examples/vue/ 编写 完成功能：完成了所有的功能，如：添加、双击修改、ESC键取消编辑、清除所有已完成任务、一键全选任务、自动聚焦，本地保存等等。 目录 1、index.html 2、app.js 3、index.css 4、效果 5、源码下载 1、index.html &lt;!doctype html&gt; &l...
Vue TodoList案例
Errol's Blog
04-02 1686
Vue TodoList案例
Vue实现todolist删除功能
08-27
在本文中，我们将深入探讨如何使用Vue.js框架来实现一个基本的待办事项列表（Todo List）应用，特别是关注删除功能的实现。Vue.js是一个轻量级的前端JavaScript框架，以其响应式数据绑定和组件化特性而受到广泛欢迎...
vue组件编写之todolist组件实例详解
08-28
Vue 组件编写之 TodoList 组件实例详解 本文将详细介绍 Vue 组件编写之 TodoList 组件的实例讲解，主要包括组件注册、模板编写、样式设计、事件处理等方面的知识点。 组件注册 在 Vue 中，组件注册是指将一个组件...
vue实现ToDoList简单实例
08-31
总的来说，Vue.js实现的ToDoList应用是一个很好的学习项目，它展示了Vue.js的基本用法，如数据绑定、事件处理和条件渲染。通过这个实例，开发者可以深入了解Vue.js如何与HTML、CSS和JavaScript协作，创建动态且交互...
vue3+ts入门（todolist案例）
02-10
在这个"vue3+ts入门（todolist案例）"中，我们将探讨如何结合 Vue3 和 TypeScript 创建一个简单的待办事项列表应用，即 Todolist。 1. **Vue3 的主要更新**： - **Composition API**：Vue3 引入了 Composition API...
vue2案例todolist
05-23
2. **数据绑定**：Vue的核心特性之一是双向数据绑定，通过`v-bind`指令实现。在`todolist`中，我们可以看到`v-model`用于连接输入框与数据模型，实时更新待办事项。 3. **组件化**：Vue推崇组件化开发，每个独立的...
案例：todo
Henry_ID的博客
07-19 642
根据已有的文件让vue文件跑起来怎么做？ 1.根据已有的 package.json 下依赖包 yarn install / yarn(可以省略 install) 完成 todo案例 完整效果演示 todo案例-创建工程和组件 目标: 新建工程, 准备好所需的一切 需求1: 创建新工程 需求2: 分组件创建 – 准备标签和样式 分析： ​ ①：初始化todo工程 ​ ②：创建３个组件和里面代码 ​ ③：把styles的样式文件准备好 ​ ④: App.vue引入注册使用, 最外层容器类
vue-cli实现TodoList案例
m0_55969466的博客
07-06 185
案例介绍 TodoList是作为新手入门的最好训练案例，在该案例中包含了很多Vue的知识点，例如： 条件渲染、列表渲染指令 表单数据绑定 事件处理和事件修饰符 计算属性 生命周期钩子函数 localStorage本地存储 自定义指令 除了上面的知识点外，最重要的就是熟悉Vue的开发流程。所以，多练习一下TodoList案例对新手来说是最好的入门案例了，下面给大家分享一下源码和演示效果。 案例要求 使用 vue + localStorage 完成案例； 输入任务，按回车添加任务； 双击编辑任务； 编辑完成
Todolist案例（vue版）
Coding_Peasant_Y的博客
10-26 271
组件中代码 <template> <div> <section class="todoapp"> <header class="header"> <h1>todos</h1> <input class="new-todo" autofocus placeholder="What needs to be done?
vue的todoList案例
m0_55916923的博客
08-30 1343
todolist案例
学习记录——用vue写一个简单的todoList案例
sakura_zr的博客
03-20 407
ps：大概是在学习怎么用webpack搭建vue脚手架之前写的。 用了Bootstrap框架定义样式啥的 todoList案例 新建一个文件夹，然后在里面新建index.html 打开命令行工具执行 npm init -y 然后下载vue ：npm install vue -S 当前文件夹内会生成一个node_modules文件，找到里面的vue.js 路径如下： 去index.html里引入： <script src="./node_modules/vue/dist/vue.js">&lt
（Vue案例）TodoList
qq_53388056的博客
12-07 669
（Vue案例）TodoList components里的MyHeader.vue components里的MyList.vue components里的MyItem.vue components 里的 MyFotter.vue 总结
[Vue] TodoList 案例
emmmm.....
10-15 1043
1. 组件化编码流程（通用） 2. 页面组件的划分 3. 静态页面代码 4. 静态页面组件化拆分 5. 初始化数据列表 6. 添加列表数据 7. 勾选 8. 删除 9. 底部待做事项状态统计 10. 全选 & 清除已完成
Vue实例-Todo-list案例
最新发布
anxiangzsq的博客
08-10 906
基本效果图组件化编码流程(通用)1.实现静态组件:抽取组件，使用组件实现静态页面效果2.展示动态数据:2.1.数据的类型、名称是什么?2.2.数据保存在哪个组件?3.交互一从绑定事件监听开始。
Vue---Todolist案例
一夜奈何梁山
08-30 617
导入包： <!-- 1:导入Vue包 --> <script src="js/vue.js"></script> 设置预加载和Vue对象： <!-- 2：设置预加载和Vue对象 --> <script> window.onload = function(){ var vm = new Vue({ el: ".list_con", d
vue todolist案例
05-11
可以参考以下代码实现一个简单的 Vue TodoList： ``` <h1>Vue TodoList <button type="submit">Add (item, index) in items" :key="index"> <span>{{ item }} (index)">Delete export ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值