Vue实现todolist完整版(增加，删除，筛选)

最新推荐文章于 2023-12-29 13:55:14 发布
最新推荐文章于 2023-12-29 13:55:14 发布
阅读量1.2k 收藏 6
点赞数 13
文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GUfeifei___/article/details/120429120
版权
这篇博客详细介绍了如何使用Vue.js实现一个完整的todolist应用，包括添加、删除任务和筛选功能。通过查看HTML、CSS和JS代码，读者可以学习到Vue组件的创建和事件处理等核心概念。
摘要由CSDN通过智能技术生成

1.html 代码（需要下载Bootstrap）

 <div id="app">
        <div class="container ">
            <h3 class="text-center">todolist</h3>
            <ul class="list-group box">
                <li class="list-group-item">
                    <div class="input-group">
                        <input type="text" class="form-control" v-model="val">
                        <span class="input-group-btn">
                            <button class="btn btn-default" @click=
最低0.47元/天 解锁文章
GUfeifei___
关注
  • 13
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
Vue增删改查(Todo-list进阶版)
weixin_57259948的博客
10-06 714
效果实现流程： 首先创建一个vue项目，Todo-list总共分三步来写， 头部我们使用input框来实现输入的数据，使用键盘事件点击添加到数据中，使用v-model实现响应式数据， 第二步来进行筛选，是完成还是未完成 我们添加的数据在这里拿到进行渲染，然后我们用css3的属性实现删除的显示和隐藏 代码实现思路： vuex代码实现思路： 我们在vuex中创建一个空对象，在定义一个初始值和初始状态，当我们的全部，然后在用map循环通过id来判断他的状态，是true还是false，实现单选和全选 .
Vue实现 TodoList
X-77
12-29 6206
手把手教你完成TodoList，定制专属待办事项！
vue实现todoList
wang159477的博客
04-10 457
系列文章目录 1、在输入框中输入内容后按enter键，即可把内容添加到下面的列表中（如果内容为空则不添加） 2、动态计算有几个未完成的任务 3、点击复选框，实现选中或不选中效果（即完成或未完成） 4、鼠标移入列表，会出现一个删除按钮，点击删除按钮即可删除该列表 5、双击列表中的内容，可对列表内容进行编辑 编辑完成后，按enter键完成编辑，或者当输入框失去焦点的时候也是完成编辑 如果想要取消修改，按esc键即可取消编辑 6、单击上面的所有任务、未完成任务、已完成任务，三个按钮可以切换任务列表 7、已经添加的
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
使用VueCli制作TodoList案例
Scavenger的博客
04-26 762
案例展示 1650611778687 准备工作 利用Vue框架搭配Html+Css做出简易版的TodoList案例，在没有引用Vuex的相关知识下，实现原生版的框架结构搭建，首先搭配好整体的网页布局 如上图我们可以将整体布局分为四大部分 MyHeader.vue MyList.vue MyItem.vue MyFooter.vue 首先，为了读者能更好的划清组件结构，我在下面对组件结构进行了标识 MyHeader.vue 组件部分 MyItem.vue 和 MyLis...
ToDoList
03-29
JavaScript是实现ToDoList动态功能的关键，比如拖放功能、任务状态的切换、定时提醒等。 4. **图片和其他资源**：如图标（`.svg`或`.png`）和其他图形元素，用于增强用户体验。 5. **字体文件**：如果应用使用了...
小白零基础学 VUE笔记
最新发布
baidu_36820987的博客
12-29 958
面试题：react、vue中的key有什么作用？（key的内部原理）1. 虚拟DOM中key的作用：key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
VUE组件汇总
weixin_45566319的博客
08-29 343
内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★6253 - Vue 2的移动UI元素 muse-ui ★3705 - 三端样式一致的响应式 U...
vue实现简易留言板（todolist）
01-07
使用bootstrap布局的vue.js入门小demo
Vue中实现Todolist（适合新手）
SANJIN0527_的博客
06-28 954
实现效果图 实现功能 在input输入要输入的内容 回车（enter）后把内容添加到未完成中 动态计算有几个未完成的任务 点击未完成的复选框到已经完成中 点击已完成的复选框回到未完成 双击列表中的内容，可对列表内容进行编辑 在编辑完成后，按回车enter键完成编辑，或者当输入框失去焦点的时候也是完成编辑如果想要取消修改，按esc键即可取消编辑 还是之前的值 已经添加的列表任务，即便关闭浏览器或者电脑，下次打开任务还在列表中（本地存储） input输入区域 <!-- 头部 -->
Vue实现todoList功能
qq_54780978的博客
11-23 2101
Vue实现dotoList案例
Vue 实现ToDoList
达拉崩巴斑得贝迪卜多比鲁翁_
06-04 722
Vue 实现ToDoList 本文实现一个用Vue脚手架搭建项目、实现简单的ToDoList功能 computed：计算属性 filters：过滤器 localStorage：本地存储 技术点 vue+localStorage 功能 回车添加任务 双击编辑任务 编辑完成按回车保存 Esc撤销编辑 点击复选框表示已经完成任务 点击X删除任务 所有任务、已经完成任务、未完成任务可筛选 具体代码演示如下 <template> <div> <header&g
Vue.js实现ToDoList
jimjiayu
06-06 558
//localStorage.js // 封装操作localstorage本地存储的方法,实现保存历史记录 var storage = { set(key,value){ localStorage.setItem(key,JSON.stringify(value)); }, get(key){ return JSON.parse(localS...
用vue实现todolist
xiongzhouxiong的博客
04-12 385
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;title&gt;todolist&lt;/title&gt; &lt;meta charset="UTF-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content=&q
Vue实现简易TodoList
liaoai的博客
02-23 4912
文章目录TodoList案例分析App.vue功能实现：1.Header部分Header.vue2.List部分List.vue3.Item部分Item.vue4.Footer部分Footer.vue TodoList案例 （省略样式部分） 分析 分为四个组件 Header List Item Footer App.vue <template> <div id="root"> <div class="todo-container"> <div
Vue实现简单ToDoList
此博客停止维护和更新，已转移https://github.com/ilvseyinfu/blog
10-04 542
一个简单的TodoList 挂个链接点这里 注意：回车自动添加，注意先输入要做的事，再输入时间，空格隔开 <input id="todo" class="form-control" v-model="newTodo" v-on:keyup.enter="addNewTodo
Vue 实现todolist的添加删除功能
06-07
好的，下面是一个简单的 Vue 实现 todolist 的添加删除功能的代码示例： ```html <!DOCTYPE html> <html> <head> <title>Vue TodoList</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <h1>TodoList</h1> <input type="text" v-model="newTodo"> <button @click="addTodo">Add</button> <ul> <li v-for="(todo, index) in todos"> {{ todo }} <button @click="removeTodo(index)">Delete</button> </li> </ul> </div> <script> var app = new Vue({ el: '#app', data: { newTodo: '', todos: [] }, methods: { addTodo: function() { if (this.newTodo != '') { this.todos.push(this.newTodo); this.newTodo = ''; } }, removeTodo: function(index) { this.todos.splice(index, 1); } } }) </script> </body> </html> ``` 在这个示例中，我们首先定义了一个包含两个属性的 Vue 实例，分别是 `newTodo` 和 `todos`。`newTodo` 表示用户输入的待办事项，`todos` 表示所有已添加的待办事项列表。 然后，我们定义了两个方法，`addTodo` 和 `removeTodo`，来实现添加和删除待办事项的功能。在 `addTodo` 方法中，我们首先判断用户输入的待办事项是否为空，如果不为空，则将其添加到 `todos` 列表中，并清空 `newTodo`。在 `removeTodo` 方法中，我们通过 `splice` 方法从 `todos` 列表中删除指定索引的待办事项。 最后，我们在页面中使用 `v-model` 指令绑定用户输入的待办事项到 `newTodo` 属性上，使用 `v-for` 指令循环渲染 `todos` 列表，并在每个待办事项后面添加一个删除按钮，通过 `@click` 绑定 `removeTodo` 方法来实现删除功能。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值