vue 实现简单版本 todolist

最新推荐文章于 2022-11-13 16:36:41 发布
最新推荐文章于 2022-11-13 16:36:41 发布
阅读量389 收藏 2
点赞数
分类专栏： vue&Element 文章标签： vue.js html5 es6 css3 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36123470/article/details/118176391
版权

昨天下午在记事本的功能上做了优化，做成了简单的 todolist，主要是来巩固一下vue的各种指令
以下是效果图

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
以上是简单版本的效果图，好啦，献上我的代码~欢迎大家踊跃提出建议

<!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>todolist</title>
		<link rel="stylesheet" href="style/index.css" />
	</head>
	<body>
		<!-- 主体区域 -->
		<section id="todolist">
			<!-- 头部区域 -->
			<header class="header">
                <h1>todolist</h1>
                <input
                type="text"
                autofocus   
                autocomplete="off"
                placeholder="请输入任务"
                class="new_todo"
                v-model="message"
                @keyup.enter="add"
            />
			</header>
			<!-- 列表区域 -->
			<section class="main" v-show="isShow">
                <div id="head">
                    <h5>待办事项</h5>
                    <span>{{ arr.length }}</span>
                </div>
                
                <ul>
                    <li v-for="(item,index) in arr" :key="item.name" @mouseover="mouseOver(index,1)" @mouseleave="mouseLeave(index,1)">
                        <input type="checkbox" @click="complateList(index)" v-model="item.checked">{{ item.name }}
                        <span v-show="isChecked == index + 1 ? isIconShow : false" @click="remove(index,1)"><svg t="1624355982144" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1214" width="30" height="30"><path d="M512 1255.489906" p-id="1215" fill="#cdcdcd"></path><path d="M718.519288 688.227064 543.827304 513.637418l174.180292-174.180292c8.801119-8.801119 8.801119-23.128523 0-31.827304-8.801119-8.801119-23.128523-8.801119-31.827304 0L512 481.810114 337.819708 307.629822c-8.801119-8.801119-23.230861-8.596442-31.929642 0.102339l0.102339-0.102339c-8.801119 8.801119-8.698781 23.026184 0.102339 31.827304l174.180292 174.180292L305.58305 688.227064c-8.801119 8.801119-8.801119 23.128523 0 31.827304 8.801119 8.801119 23.128523 8.801119 31.827304 0L512 545.464721 686.691985 720.054367c8.801119 8.801119 22.923846 8.903458 31.724965 0.102339l0.102339-0.102339C727.218069 711.355587 727.218069 697.028183 718.519288 688.227064z" p-id="1216" fill="#cdcdcd"></path></svg></span>
                    </li>
                </ul>
                <div id="head">
                    <h5>已完成</h5>
                    <span>{{ complate.length }}</span>
                </div>
                <ul>
                    <li v-for="(item,index) in complate" :key="index" @mouseover="mouseOver(index,2)" @mouseleave="mouseLeave(index,2)">
                        <input type="checkbox" checked disabled @click="complateList(index)">{{item.name}}
                        <span v-show="isComplateChecked == index + 1 ? isComplateIconShow : false" @click="remove(index,2)"><svg t="1624355982144" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1214" width="30" height="30"><path d="M512 1255.489906" p-id="1215" fill="#cdcdcd"></path><path d="M718.519288 688.227064 543.827304 513.637418l174.180292-174.180292c8.801119-8.801119 8.801119-23.128523 0-31.827304-8.801119-8.801119-23.128523-8.801119-31.827304 0L512 481.810114 337.819708 307.629822c-8.801119-8.801119-23.230861-8.596442-31.929642 0.102339l0.102339-0.102339c-8.801119 8.801119-8.698781 23.026184 0.102339 31.827304l174.180292 174.180292L305.58305 688.227064c-8.801119 8.801119-8.801119 23.128523 0 31.827304 8.801119 8.801119 23.128523 8.801119 31.827304 0L512 545.464721 686.691985 720.054367c8.801119 8.801119 22.923846 8.903458 31.724965 0.102339l0.102339-0.102339C727.218069 711.355587 727.218069 697.028183 718.519288 688.227064z" p-id="1216" fill="#cdcdcd"></path></svg></span>
                    </li>
                </ul>
            </section>
			<!-- 统计和清空区域 -->
			<footer class="footer">
                <a href="#" @click="clear" class="clear">clear</a>
            </footer>
		</section>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		var todolist = new Vue({
			el: '#todolist',
			data: {
                // 待办列表
				arr: [], 
                // 已完成列表
                complate:[],
                // 数组下标
				index: 0,
                message:'',
                // 列表显示隐藏
                isShow:false,
                // 待办是否显示icon
                isIconShow:false,
                // 待办选中行的索引
                isChecked:0,
                // 已完成选中行的索引
                isComplateChecked:0,
                // 已完成是否显示icon
                isComplateIconShow:false,
			},
            methods:{
                add(){
                    if (this.message !== '') {
                         // 获取用户输入信息 并 添加到数组中
                        this.arr.push({name:this.message,checked:false})
                        // 显示列表
                        this.isShow = true
                        // 清空输入框
                        this.message = ''
                    }else{
                        alert('请输入内容')
                    }
                },
                // 清除所有
                clear(){
                    this.arr.length = 0
                    this.complate.length = 0
                    // 隐藏列表
                    this.isShow = false
                },
                // 鼠标移入
                mouseOver(index,flag){
                    if (flag == 1) {
                        this.isChecked = index + 1
                        this.isIconShow = true
                    }else{
                        this.isComplateChecked = index + 1
                        this.isComplateIconShow = true
                    }
                },
                // 鼠标移出
                mouseLeave(index,flag){
                    if (flag == 1) {
                        this.isChecked = index + 1
                        this.isIconShow = false
                    }else{
                        this.isComplateChecked = index + 1
                        this.isComplateIconShow = false
                    }
                },
                // 删除数组数据
                remove(index,flag){
                    if (flag == 1) {
                        this.arr.splice(index,1)
                    }else{
                        this.complate.splice(index,1)
                    }
                },
                // 完成待办
                complateList(index){
                    // 添加到已完成数组中
                    this.complate.push(this.arr[index])
                    // 删除当前数组内容
                    this.arr.splice(index,1)
                    // 清除已完成数组中的勾选框 
                }
            }
		})
	</script>
</html>

一开始有个小bug , 如果勾选了待办中的第三条数据，数据从待办删除了，但是最后一条的勾选框还在。因为这里复用了组件，保留了之前的状态。要解决这个问题，可以为列表项带上id作为唯一key，那么每次渲染列表时都会完全替换所有组件，使其拥有正确状态。但是我这里没有id，所以我暂时用的name做为唯一的key
大家实际开发中尽量用id 做为 唯一的 key

j解决方式： 通过给两个 v-for 添加一个 :key=item.name ,

此处附上我的git地址，可以下载源码哦~

https://gitee.com/celinaTong/todo-list

咿呀咿呀哟~~
关注
专栏目录
Vue实现简单ToDolist案例
Huang_DW的博客
07-01 444
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-代办事项
Black_snow_ji的博客
03-19 782
首先准备思路 1.先引入Vue.js框架 2.可以自己写一个简单布局或者可以引入其他插件 3.具体请看代码有注释 这里是引用 sui 的插件和css样式 <div id="app"> <!--header start--> <header class="bar bar-nav"> <a class...
vue实现简单的ToDoList
qq_25302061的博客
09-20 194
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt;     &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0"
vue实现简单的todolist
sinat_29289673的博客
11-23 301
点击预览   &lt;div id="app"&gt; &lt;input type="text" class="form-control" v-model="task"&gt; &lt;button class="btn btn-default" v-on:click="add"&gt;添加&lt;/butt
Vue实现简易todolist
大风起兮云飞扬
02-09 259
通过单击添加按钮，将输入框中的值添加到下面，可删除，也可重新编辑。具体效果如图： 具体代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i...
使用Vue编写简单的todolist
weixin_48065262的博客
03-06 276
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <input type="text" @keydown.enter="change" ref="val" /><button @click="search" &g
vue实现todolist功能、todolist组件拆分及todolist的删除功能
10-17
首先，让我们看一个简单的TodoList功能的实现。在HTML中，我们有一个`<input>`元素和一个提交按钮，它们分别与Vue实例的数据属性`inputValue`和`list`双向绑定。用户在输入框中输入待办事项，点击提交按钮后，`input...
vue实现留言板todolist功能
12-12
本文，就利用这些基础知识来实现一个留言板， 老外把他称之为todolist. 第一步、使用bootstrap做好布局 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>&...
vue实现ToDoList简单实例
08-31
在本实例中，我们将探讨如何使用Vue.js创建一个简单的ToDoList应用，该应用包含添加任务、删除任务和全选删除功能。下面将详细阐述实现这个功能的关键步骤和涉及的技术。 首先，我们需要为页面添加基本的Bootstrap...
vue实现一个 todoList
01-20
在本示例中，我们将探讨如何使用Vue实现一个简单的待办事项列表（TodoList）应用，这将涉及Vue的一些核心特性，如数据绑定、事件处理和组件化。 1. **数据双向绑定 (v-model)** 数据双向绑定是Vue的核心特性之一，...
Vue1.0版本——TodoList
小牛牛的博客
02-14 878
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
Vuejs 实现简易 todoList 功能 与 组件实例代码
12-29
todoList 结合之前 Vuejs 基础与语法 •使用 v-model 双向绑定 input 输入内容与数据 data •使用 @click 和 methods 关联事件 •使用 v-for 进行数据循环展示 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>TodoList</title> [removed][removed] </head> <body> <div id=root> <div> <input v-model=inputValue
Vue 实现TodoList（源码）
wwwjjjjj666的博客
11-11 308
Vue 实现TodoList
Todolist案例（vue版）
Coding_Peasant_Y的博客
10-26 293
组件中代码 <template> <div> <section class="todoapp"> <header class="header"> <h1>todos</h1> <input class="new-todo" autofocus placeholder="What needs to be done?
Vue实现TODOList
鸟人的博客
07-19 312
使用Vue实现简单的TODOList功能。
用vue实现todolist/源码/思路
Martin的博客
09-28 475
todolist思路 一 、 添加思路： 1.将JSON对象用v-for循环遍历到ul里面； 2.给按钮添加点击事件创建函数； 3.在函数中需要得到输入框的值； 4.把得到的数据push到数组中；this.arr.push({title:this.inputval}), 5.清空输入框 this.inputval=’’ 二、任务总数： 获取数组数据的长度 三、点击变色 1.给遍历出来的数组去添加复选框； 2.当勾到复选框时，要知道勾选那条数据(添加一个状态的布尔值 所以需要修改数据 给每一条数据添加一个用来
Vue实现todolist
最新发布
qq_58705070的博客
11-13 588
todolist，又是todolist
使用vue重构ToDoList—最简单的待办事项列表
前端小白王小辉的博客
07-19 889
使用vue重构ToDoList—最简单的待办事项列表 大家好，我是一个刚入门前端的一个小白，希望各位大佬们能够对小的多多指导，我先做一下自我介绍吧。我叫王小辉，我大学的专业是播音主持，为什么选择学习前端呢，这就跟我大学最后一年跟几个小伙伴一起创业开始说起，其实也不能完全说成创业，其实就是大学期间认识的几个小伙伴想一起做一些喜欢的事情，那是18年年初，当时小程序市场起步，市场上大大小小的小程序公司如雨后春笋冒出来，当时我们觉得这个小程序是一个市场，并且可以通过大学生创业这个方式获取到一些资源。我的另两个小伙伴
Vue基础版ToDoList
qq_44131445的博客
04-08 172
基于vue的基础，自己模仿着写了一个ToDoList的界面，还没有加上存储之类的，想用组件开发，但写出来有些乱了，就整理了一下基础版的 html部分的布局 <div id="app"> <header> <!-- 输入框 --> <div class="title"> <strong>ToDoList</strong>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

咿呀咿呀哟~~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值