VUE3 实现ToDoList经典任务清单增强终结版

最新推荐文章于 2024-04-08 15:45:39 发布
最新推荐文章于 2024-04-08 15:45:39 发布
阅读量1k 收藏 6
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/start1018/article/details/123150943
版权

废话不都说,详情看代码

<!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>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        #app {
            width: 888px;
            background-color: #cabdbd;
            margin: 0 auto;
        }

        h2 {
            color: aliceblue;
        }

        .top {
            height: 50px;
            display: flex;
            align-items: center;
            background-color: #866668;
            padding: 0 30px;
        }

        .entry {
            height: 35px;
            width: 300px;
            border-radius: 40px;
            padding-left: 10px;
            margin-left: 400px;
            border: #000 2px solid;
        }

        h3 {
            padding-left: 30px;
            margin: 10px 0;
        }

        .line {
            height: 5px;
            background-color: aliceblue;
        }

        .item {
            padding: 15px 0 5px 0;
            margin: 0 50px;
            border-bottom: 2px solid #000;
            display: flex;
            align-items: center;
        }

        .items {
            height: 200px;
            overflow: auto;
            padding-bottom: 20px;

        }

        .items::-webkit-scrollbar {
            display: none;
        }

        img {
            width: 20px;
            height: 20px;
            margin-left: 640px;
        }

        input[type="checkbox"] {
            margin-right: 20px;
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="top">
            <h2>To do List</h2>
            <input class="entry" type="text" placeholder="请输入内容  Enter确认添加" v-model.trim="temp" @keyup.enter="addItem">
        </div>
        <div class="line"></div>
        <h3>正在进行中</h3>
        <div class="list">
            <div class="items">
                <div class="item" v-for="(item,index) in undoList" :key="item.name">
                    <input type="checkbox" v-model="item.done">
                    <!-- 如果状态为0 显示 文本 -->
                    <span v-show="item.state==0" @dblclick="item.state=1;tempEdit=item.name">{{item.name}}</span>
                    <!-- 状态为1显示输入框 -->
                    <input type="text" v-model="tempEdit" v-show="item.state==1"
                        @keyup.esc="item.state=0;tempEdit=item.name" @keyup.enter="item.state=0;item.name=tempEdit"
                        @blur="item.state=0;item.name=tempEdit">
                    <!--  @blur="item.state==0;item.name=tempEdit" -->
                    <img @click="removeItem(item)" src="./img/shanchu.png" alt="">
                </div>
            </div>
            <div class="line"></div>
            <h3>已经完成</h3>
            <div class="list">
                <div class="items">
                    <div class="item" v-for="(item,index) in doneList" :key="item.name">
                        <input type="checkbox" v-model="item.done">
                        <!-- 如果状态为0 显示 文本 -->
                        <span v-show="item.state==0" @dblclick="item.state=1;tempEdit=item.name">{{item.name}}</span>
                        <!-- 状态为1显示输入框 -->
                        <input type="text" v-model="tempEdit" v-show="item.state==1"
                            @keyup.esc="item.state=0;tempEdit=item.name" @keyup.enter="item.state=0;item.name=tempEdit"
                            @blur="item.state=0;item.name=tempEdit">
                        <!--  @blur="item.state==0;item.name=tempEdit" -->
                        <img @click="removeItem(item)" src="./img/shanchu.png" alt="">
                    </div>
                </div>
            </div>
            <script>
                Vue.createApp({
                    data() {
                        return {
                            //清单列表
                            //getItem获取本地数据
                            //||"[]" 如果获取不到转换为空的数组
                            list: JSON.parse(localStorage.getItem("list") || "[]"),
                            // 存放列表的数据
                            // list: [{ name: "学习Vue", done: false, state: 0 },
                            // { name: "学习，学个屁", done: true, state: 0 }],
                            // 存放输入的数据
                            temp: '',
                            // 修改框的临时数据
                            tempEdit: ''
                        }
                    },
                    methods: {
                        addItem() {
                            // 如果文本为空 就返回
                            if (this.temp === "") {
                                return;
                            }
                            // unshift 添加到最前面
                            this.list.unshift({
                                name: this.temp,
                                done: false,
                                state: 0
                            })
                            // 清空临时框
                            this.temp = "";
                        },
                        removeItem(item) {
                            // // 从list列表中找到删除元素的下标
                            // // var ind = this.list.findIndex(value=>value==item);
                            // var ind = this.list.indexOf(item);
                            // // 从list列表的ind下标开始删除一个
                            // this.list.splice(ind, 1);


                            //弹出确认框
                            var flag = window.confirm("你确定要删除我吗");
                            //执行删除
                            if (flag) {
                                //查找符合条件的元素的索引值
                                var ind = this.list.findIndex(value => value.title === item.title);
                                //splice从第ind删除一个
                                this.list.splice(ind, 1);
                            }
                        }
                    },
                    computed: {
                        //通过计算把现有的list数据 分成正在完成 和正在进行两部分
                        undoList() {
                            //filter  是数组的过滤函数 如果返回真 则对当前遍历的数据保留
                            return this.list.filter(item => !item.done)
                        },
                        doneList() {
                            return this.list.filter(item => item.done)
                        }
                    },
                    watch: {
                        "list": {
                            handler() {
                                // setItem 设置本地数据
                                //JSON.stringify把js对象抓换为json字符串
                                //JSON.parse 把字符串转换为js对象
                                localStorage.setItem("list", JSON.stringify(this.list));
                            },
                            deep: true,
                        }
                    }
                }).mount("#app")
            </script>

</body>

</html>

在这里插入图片描述

不知名的前端专家
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
[Vue3实操] 开发Todo List
weixin_30230009的博客
04-06 2570
前言使用Vue3最新的Composition API，开发一个Todo List应用。Todo List应用比较简单，不会使用其他复杂的Vue3组件，但这也使得当前应用与真实的应用脱钩，所以本文重点是体会Vue3的最新语法，下篇文章会阅读element-plus-admin开源项目的源码，从而掌握Vue3目前最近技术栈的使用方式。所谓Todo List应用主要用于记录你需...
vue3+ts入门（todolist案例）
02-10
vue3+ts入门（todolist案例）
vue3-todo-list:vue3 todolist示例
03-09
Vue3 TodoList示例 技术栈 vue3.0 恶作剧 尾风
用vue.js写案例——ToDoList待办事项 （步骤和全码解析）
最新发布
m0_73490019的博客
04-08 5458
首先在ToDoMain组件中声明并触发自定义事件，传递参数 6 id，接着在App组件中监听自定义事件，当自定义事件被触发时，执行对应的方法，进 行删除操作，删除任务的具体实现步骤如下。单击切换状态区域时，默认状态为all，即显示全部任务，当状态切换为active时， 显示未完成的任务，当状态切换为completed时，显示已完成的任务。② 新建并封装组件。App 组件为根组件，数据在App组件中，现在需要将App根组件中的初始数据传递 到列表区域，ToDoMain组件中。
vue实现todolist愿望清单-动画
11-02
是一个todolist，实现的效果为添加、双击修改、删除、统计是否完成的清单
vue3+ts实现drag/draggable拖拽任务看板taskboard
07-05
ganttchart(甘特图) taskboard(任务看板) jsoneditor(JSON编辑器)
vue实现todolist功能、todolist组件拆分及todolist的删除功能
10-17
主要介绍了vue实现todolist功能、todolist组件拆分及todolist的删除功能,需要的朋友可以参考下
TodoList_Vue3:基于Vue3的TodoList应用
03-26
TodoList_Vue3 基于Vue3的TodoList应用
Vue3 实现简单 todo-list
云胡
05-24 1281
一、概述 通过 todo-list 来学一些 vue3 的知识。 二、设计 维护两个列表，一个待办事项，一个已完成事项。 三、界面 3.1 模板部分 <template> <h2>云胡待办事项</h2> <div id="todo-list"> <el-row> <el-col :span = "12"> <ul class = "card"> <div> 待办事项
用vue3做一个todoList
one的博客
06-24 2866
1.用户输入新增的事项点击回车或者添加，事项列表中显示当前添加的事项。 2.事项分为，所有事项、未办事项、已完成事项。新增的事项默认为未办事项。 3.事项的状态：已完成和未办可相互转换。 4.事项可删除。...
Vue3.0实现todolist
ll666888999的博客
03-31 1504
项目准备 Vue3.0环境搭建 1、官网安装node，进入node.js官网安装长期支持版 打开终端输入：node -v 如果出现node版本号，表明安装成功 安装node自带npm,包管理工具 输入npm -v 出现npm的版本号 2、安装淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org 输入cnpm -v 会出现一系列版本号，说明安装成功 3、安装vue环境：cnpm i -g vue @vue/cli 输入vue -
Vue实现todolist
07-13
利用vue框架，实现todolist MVC DEMO，基本实现必备功能，其中使用到了element-ui
Vue.js小Demo--todoList待办事项清单
404_Not__Found
11-29 876
通过Vue的基本方法实现一个todoList，功能包括增加事项，删除事项。
本地储存(设置和获取信息)
weixin_33755554的博客
12-14 397
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
Vue实现TodoList任务列表案例
m0_57101855的博客
05-28 2070
一、初始化vite项目： 二、梳理项目结构： 1）重置index.css中的全局样式； 2）重置App.vue组件的代码结构 三、封装TodoList组件： 1）创建并注册TodoList组件 2）渲染列表组件（基于boorstrap) 1.在 main.js 入口文件中，导入 bootstrap.css 样式表。 2.在 App 组件中通过 list 属性，将数据传递到 TodoList 组件之中，为了接受外界传递过来的列表数据，需要在 TodoList 组件中声明props 属性。 3
Vue实现todoList（任务计划列表）
热门推荐
冰雪为融的博客
07-14 3万+
大致功能：1、在输入框中输入内容后按enter键，即可把内容添加到下面的列表中（如果内容为空则不添加）2、动态计算有几个未完成的任务3、点击复选框，实现选中或不选中效果（即完成或未完成）4、鼠标移入列表，会出现一个删除按钮，点击删除按钮即可删除该列表5、双击列表中的内容，可对列表内容进行编辑编辑完成后，按enter键完成编辑，或者当输入框失去焦点的时候也是完成编辑如果想要取消修改，按esc键即可取...
Vue版todolist案例
码小余の博客
09-25 2981
Vue版todolist案例 todolist – 记录你的待办事项 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue版todolist案例</title> <style type="text/css"> *{ margin: 0;
Vue3.0实现一个任务清单ToDoList & vue3小练习
m0_52952413的博客
01-10 1229
## 功能包含 任务增加 任务查找 点击任务切换任务状态 下方按钮实现任务展示切换 总而言之实现了任务的增改查 template代码： <template> <div class="container"> <h2>任务计划表</h2> <!-- 添加框 --> <div class="add"> 添加任务：<input v-model="taskModel"
Vue3.0实现todolist（新建组件）
祈澈菇凉
09-19 405
参考文档 参考文档：https://blog.csdn.net/ll666888999/article/details/123789098 参考视频：https://www.imooc.com/learn/1300 官方文档查看文档：https://v3.cn.vuejs.org/ 准备工作 在views底下新建一个父组件Home.vue 在components中创建三个文件夹，三个子组件nav...
使用Vue3实现todolist的添加和删除。
07-15
你可以按照以下步骤使用Vue 3来实现todolist的添加和删除功能： 1. 首先，在你的Vue项目中安装Vue 3。你可以使用npm或者yarn来安装它： ``` npm install vue@next ``` 或者 ``` yarn add vue@next ``` 2. 在你的Vue组件中，创建一个data属性来存储todo列表和输入框的值： ```javascript data() { return { todos: [], newTodo: '' } } ``` 3. 创建一个方法来添加todo到列表中： ```javascript methods: { addTodo() { if (this.newTodo.trim() !== '') { this.todos.push(this.newTodo); this.newTodo = ''; } } } ``` 4. 创建一个方法来删除todo： ```javascript methods: { deleteTodo(index) { this.todos.splice(index, 1); } } ``` 5. 在模板中，使用v-model指令来绑定输入框的值，并使用v-for指令来循环渲染todo列表： ```html <input type="text" v-model="newTodo"> <button @click="addTodo">Add</button> <ul> <li v-for="(todo, index) in todos" :key="index"> {{ todo }} <button @click="deleteTodo(index)">Delete</button> </li> </ul> ``` 现在，当你在输入框中输入内容并点击"Add"按钮时，该内容将会被添加到todo列表中。当你点击"Delete"按钮时，对应的todo将会被从列表中删除。 希望这个例子能帮助你实现Vue 3中todolist的添加和删除功能！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值