基于Vue写todoList列表

最新推荐文章于 2022-01-14 16:16:12 发布
最新推荐文章于 2022-01-14 16:16:12 发布
阅读量246 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FORGIVE66/article/details/106298677
本文介绍如何使用Vue.js框架创建一个简单的待办事项应用程序，包括输入、保存、删除和标记任务为已完成的功能，并利用本地存储实现数据持久化。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <style>

        *{

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }

 

    .box{

        width: 500px;

        margin: 0 auto;

        border: 1px greenyellow solid;

    }

    #app{

        margin-top: 20px;

    }

    #app input{

        display: inline-block;

        width: 400px;

        height: 50px;

    }

    .thing{

       background-color: khaki;

       text-align: center;

       height: 50px;

       border-bottom: 1px solid white;

 

    }

    .thing p{

        background-color: lightgreen;

        /* margin-top: 10px; */

        width: 400px;

        height: 50px;

        float: left;

        line-height: 50px;

        border-bottom: 1px solid white;

 

    }

    #app h3{

        text-align: center;

        margin-top: 20px;

    }

    button{

        display: inline-block;

        width: 40px;

        height: 30px;

        margin-top: 10px;

    }

    .complete{

       background-color: khaki;

       text-align: center;

       height: 50px;

       border-bottom: 1px solid white;

    }

    .complete p{

        background-color: lightgreen;

        /* margin-top: 10px; */

        width: 400px;

        height: 50px;

        float: left;

        line-height: 50px;

        border-bottom: 1px solid white;

        text-decoration: line-through;

    }

    </style>

</head>

<body>

    <div class="box">

        <div id="app">

            <input type="text" v-model="message" placeholder="请输入您的代办事项">

            <button v-on:click="myClick">保存</button>

            <h3>待办事项</h3>

            <div  class="thing" v-for="(item,index) in list">

                <p >{{item}}</p>

                <button @click="thingCom(index)">完成</button>

                <button @click="delItemthing(index)">删除</button>

            </div>

            <h3>完成事项</h3>

            <div  class="complete" v-for="(item,index) in comlist">

                <p >{{item}}</p>

                <button @click="delItemcom(index)">删除</button>

            </div>

        </div>

    </div>

</body>

<script>

    var app = new Vue({

        el:"#app",

        data:{

            message:"",

            list:[],

            comlist:[]

        },

        methods:{

            myClick:function(){

                if(this.message!=""){

                    if((this.list).indexOf((this.message).trim())==-1 &&this.message!="" ){

                     this.list.push(this.message.trim())

                 }

                 else{

                     alert("不能重复，")

                 }

                }

                else{

                    alert("不能为空")

                }

                this.message =""

                localStorage.setItem("list",JSON.stringify(this.list))

            },

            thingCom(index){

                app.comlist.push(this.list[index])

                app.list.splice(index,1)

                localStorage.setItem("list",JSON.stringify(this.list))

                localStorage.setItem("comlist",JSON.stringify(this.comlist))

            },

 

            delItemthing(index){

                app.list.splice(index,1)

                localStorage.setItem("list",JSON.stringify(this.list))

 

            },

            delItemcom(index){

                app.comlist.splice(index,1)

                localStorage.setItem("comlist",JSON.stringify(this.comlist))

                console.log(app.comlist)

            }

        },

        created(){

            let a =localStorage.getItem("list")

            if(a){

                a=JSON.parse(a)

                this.list =a

            };

            let b=localStorage.getItem("comlist")

            if(b){

                b=JSON.parse(b)

                this.comlist=b

            }

        }

    })

Forgive小麟
关注
基于Vue的任务清单（To Do List）
沉默是今晚的朝天门长
12-16 1342
本代码的部分功能借鉴了https://blog.csdn.net/lhjuejiang/article/details/81040236 界面展示： 实现的功能： 1.增：输入框中编辑后点击“添加任务”按钮或者回车将新任务添加到任务展示区顶部。当输入为空不添加（空格认为有字符），输入已有任务会在右上角提示任务重复不可添加（有空格认为是两个任务）。 2.删：点击下方任务展示区域右侧的“x”按钮进行删除当前任务操作。 3.改：双击任务区域某条任务可进行修改，重复则右上角进行提示且继续修改（有空格
Vue实现TodoList任务列表案例
m0_57101855的博客
05-28 2219
一、初始化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(本地存储，附源码)
一棵星星
08-31 2922
todolist完整代码（html、js、css）本地存储，无bug
vue-todolist，vue小目标列表实现，vue任务列表实现
12-09
本资源99.999%可以用。因为我知道下载下来不能用有多难受！ vue-todolist包括三个版本，一个是脚手架的，一个是普通vue的，一个是使用vue组件编写的。不能用的，一定是环境没有搭配好，我的博客里会有相关的介绍和本资源的简介图，可以看一下。（脚手架删除少传了一个参数 const {todo,index,deleteTodo}=this，如果下载了，注意加一下，图在我博客里）
Vue杂记（二）——todolist待办事项列表
苦作舟的空城机
10-20 1063
使用vue去制作一个todolist待办事项列表 里面的vue.js和bootstrap.js都是我从网上直接引过来的包 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,i...
实战 Vue 之实现 todoList
杏子
10-30 1848
todoList 是一个任务管理功能，本文将使用 Vue 框架实现。包含的具体功能点如下： 1. 添加任务； 2. 修改任务状态； 3. 删除任务； 4. 筛选任务。
基于Vue制作todolist列表
05-23
基于Vue制作todolist列表
软件工程毕业设计—基于java+vue的todolist待办事项关联系统前端+后端源码.zip
06-28
软件工程毕业设计—基于java+vue的todolist待办事项关联系统前端+后端源码.已获高分通过项目。 软件工程毕业设计—基于java+vue的todolist待办事项关联系统前端+后端源码.已获高分通过项目。软件工程毕业设计—基于...
基于Vue的TodoList示例麻雀虽小五脏俱全
08-08
本示例项目"基于Vue的TodoList"是一个经典的学习案例，它虽然小巧，但却包含了Vue.js开发中的核心概念和技术，非常适合初学者入门或经验丰富的开发者巩固Vue知识。 首先，让我们来了解Vue.js的基本概念。Vue.js是一...
vue-todolist:Vue-todolist
03-13
在这个名为 "vue-todolist" 的项目中，我们看到一个基于Vue实现的待办事项清单应用。这个应用可以帮助用户管理日常任务，提供添加、删除和状态切换等功能，是学习Vue基础和实践的一个经典案例。 首先，项目的初始化...
Vue.js实现toDoList列表功能
m0_46212240的博客
03-19 295
toDoList是一个经典的案例，原生js，jquery和vue.js都可以实现此功能，我们先来看看用jquery实现此功能的代码。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <bod...
Vue实现todoList（任务计划列表）
热门推荐
冰雪为融的博客
07-14 4万+
大致功能：1、在输入框中输入内容后按enter键，即可把内容添加到下面的列表中（如果内容为空则不添加）2、动态计算有几个未完成的任务3、点击复选框，实现选中或不选中效果（即完成或未完成）4、鼠标移入列表，会出现一个删除按钮，点击删除按钮即可删除该列表5、双击列表中的内容，可对列表内容进行编辑编辑完成后，按enter键完成编辑，或者当输入框失去焦点的时候也是完成编辑如果想要取消修改，按esc键即可取...
分享一个用vue写的todolist的待办事宜
qq_40816649的博客
05-30 2896
通过数据的双向绑定，列表循环渲染和localstorage本地缓存完成。虽然是个简单的例子但是这里面包含的东西对vue的初学者来说还是挺多的。直接贴上代码吧&lt;template&gt; &lt;div id="app"&gt; &lt;input type="text" v-model="todo" @keydown="add($event)"&gt; &a
【Vue.js/Vue-cli】实现To do list
qq_37086980的博客
01-19 293
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>TodoList</title> <script src="https://cdn.jsdelivr...
进入界面1，不进行下一步，点击另一个标签页，回来界面1，数据丢失
farmss的博客
01-14 390
1.需求：选择一个用户，点击签约，进入新增家庭签约页面（标签页面不要关闭），然后点击标签页回到上一页，再回到新增家庭签约页面，里面的数据丢失。 操作如下图： 2.经过控制台得到数据丢失了，使用 this.$route.params.data;结果是unfined。 解决方法：在create（）方法里面写： created() { this.listParam = this.$route.params.data; //第一次进入的时候，this.$route.params.data;.
Vue实现todolist
云
02-17 1万+
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id=&q
JS复习整理6_事件
weixin_42583552的博客
09-23 299
1.事件冒泡 由内而外的事件传播（从屏幕里飞出来一支箭的感觉） 2.事件捕获 由表及里的事件传播（力透纸背的感觉） 3.DOM事件流（DOM2级） 事件捕获阶段 -> 处于目标阶段 -> 事件冒泡阶段（拿根针从屏幕扎进去，缝衣服的感觉） 事件捕获是从DOM树根到叶子的事件传播，所以可以在靠近根的位置捕获（event.stopPropagation）事件，让叶子收不到事件信号 事件冒泡是从叶子到根的原路返回过程，所以可以在靠近根的位置集中处理（event.target）叶子的事件，也就是所谓的事件
基于vue-element-ui的一款表格设计器table-making
weixin_40073115的博客
07-05 9246
简介 如果你的项目中有很多的表格，即使用elment-ui table插件你也必须每次都必须写一遍代码进行开发，如果你使用过表单设计器，你就会希望能得到一款像form表单设计器一样可以通过拖拽配置快速生成一个表格，table-making就是一款不错的表格设计器。参照form-making的源码，并可以集成进form-making中配合表单或其他可视化工具中使用快速设计出表格，并且可以在vue项目中渲染。 该插件包含两个重要组件 TableMaking 表格设计器 GenerateTable 表格渲染器 g
vue的todolistDemo经典案例
qq_36991183的博客
09-05 2026
1、用vue脚手架工具生成myproject项目 2、用webstorm软件来open打开 3、这里的/src目录下有App.vue和main.js 这里app是入口，app加载的helloworld.vue组件 4、现在我们直接从App.vue做文档 粘贴一下实现代码 App.vue <template> <div id="app"> <...
实现基于Vue的动态todoList记事本
### Vue小demo todoList记事本知识点解析 #### 标题解析 本项目标题为“Vue小demo todoList记事本”，说明该项目是一个使用Vue.js框架实现的简单记事本应用。在该应用中，用户可以执行基础的记事功能，如添加事项...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值