Vue实现ToDoList

最新推荐文章于 2023-09-15 20:00:20 发布
最新推荐文章于 2023-09-15 20:00:20 发布
阅读量157 收藏
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cabu_husky/article/details/107674476
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		body{
		    margin: 0;
		    padding: 0;
		    font-size: 16px;
		    background: #CDCDCD;
		}
		header{
		    height: 50px;
		    background: #333;
		    background: rgba(47,47,47,0.98);
		}
		section{
    		margin: 0 auto;
		}
		@media screen and (min-width: 620px){
			section{
			    width: 600px;
			    padding: 0 10px;
			}
		}
		label{
		    float: left;
		    width: 100px;
		    line-height: 50px;
		    color: #DDD;
		    font-size: 24px;
		    cursor: pointer;
		    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
		}
		header input{
		    float: right;
		    width: 60%;
		    height: 24px;
		    margin-top: 12px;
		    text-indent: 10px;
		    border-radius: 5px;
		    box-shadow: 0 1px 0 rgba(255,255,255,0.24), 0 1px 6px rgba(0,0,0,0.45) inset;
		    border: none;
		}
		h2{
			position: relative;
		    display: block;
		    font-size: 1.5em;
		    margin-block-start: 0.83em;
		    margin-block-end: 0.83em;
		    margin-inline-start: 0px;
		    margin-inline-end: 0px;
		    font-weight: bold;
		}
		span{
		    position: absolute;
		    top: 2px;
		    right: 5px;
		    display: inline-block;
		    padding: 0 5px;
		    height: 20px;
		    border-radius: 20px;
		    background: #E6E6FA;
		    line-height: 22px;
		    text-align: center;
		    color: #666;
		    font-size: 14px;
		}
		ol,ul{
		    padding: 0;
		    list-style: none;
		}
		li{
		    height: 32px;
		    line-height: 32px;
		    background: #fff;
		    position: relative;
		    margin-bottom: 10px;
		    padding: 0 45px;
		    border-radius: 3px;
		    border-left: 5px solid #629A9C;
		    box-shadow: 0 1px 2px rgba(0,0,0,0.07);
		}
		li input{
		    position: absolute;
		    top: 6px;
		    left: 10px;
		    width: 22px;
		    height: 22px;
		    cursor: pointer;
		}
		li a{
		    position: absolute;
		    top: 2px;
		    right: 5px;
		    display: inline-block;
		    width: 14px;
		    height: 12px;
		    border-radius: 14px;
		    border: 6px double #FFF;
		    background: #CCC;
		    line-height: 14px;
		    text-align: center;
		    color: #FFF;
		    font-weight: bold;
		    font-size: 14px;
		    cursor: pointer;
		}
	</style>
</head>
<body>
	<div id="app">
		<header>
			<section>
				<label for="title">ToDoList</label>
				<input v-model="value" @keyup="enter($event)" type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off">
			</section>
		</header>
		<section>
			<h2>
				正在进行
				<span id="todocount">{{ todoarr.length }}</span>
			</h2>
			<ol id="todolist" class="demo-box">
				<li v-for="(item,index) in todoarr">
					<input type="checkbox" @change="check1(index)" :key="+todo">{{ item }}
					<a @click="del1(index)">-</a>
				</li>
			</ol>
			<h2>
				已经完成
				<span id="donecount">{{ donearr.length }}</span>
			</h2>
			<ul id="donelist">
				<li v-for="(item,index) in donearr">
					<input type="checkbox" checked @change="check2(index)" :key="+done">{{ item }}
					<a @click="del2(index)">-</a>
				</li>
			</ul>
		</section>	
    </div>
</body>
</html>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
	const vm = new Vue({
		el: "#app",
		data:{
			value: '',
			todoarr: [],
			donearr: [],
		},
		methods:{
			enter: function (e) {
				if(e.keyCode == 13){
					vm.todoarr.push(vm.value);
					vm.value = '';
				}
			},
			check1: function (index) {
				vm.donearr.push(vm.todoarr[index]);
				vm.todoarr.splice(index,1);
			},
			check2: function (index) {
				vm.todoarr.push(vm.donearr[index]);
				vm.donearr.splice(index,1);
			},
			del1: function (index) {
				vm.todoarr.splice(index,1);
			},
			del2: function (index) {
				vm.donearr.splice(index,1);
			}
		}
	})
</script>
Cabu_husky
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实现todolist笔记
weixin_45732235的博客
03-19 2942
文章目录前言一、静态页面二、初始化列表三、添加演示四、勾选演示五、删除演示六、底部统计演示七、底部交互演示所有代码总结 前言 使用Vue实现简单的todo-list案例 🌴学习Vue只用通过不断的练习，和使用代码才能够熟记，我跟着视频敲了一遍后，想着要自己再敲一遍，捋一下逻辑，让自己记得更熟。 一、静态页面 🌾首先已经有了todolist的静态页面的html以及css文件，想办法用组件来实现就要进行拆分，看着静态页面思考一下拆分几个子组件，最后都放入父组件App.vue 🌾分好之后，确定哪个组件包含其
（Vue案例）TodoList
qq_53388056的博客
12-07 652
（Vue案例）TodoList components里的MyHeader.vue components里的MyList.vue components里的MyItem.vue components 里的 MyFotter.vue 总结
Vue实现 TodoList
X-77
12-29 6126
手把手教你完成TodoList，定制专属待办事项！
Vue实现todolist
qq_58705070的博客
11-13 555
todolist，又是todolist
利用vue做一个简单的todolist
qq_50280292的博客
11-03 2160
vue
Vue.js实现TodoList
学会改变的博客
07-02 259
通过Vue实现数据的双向绑定 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TodoList</title> <script src="./vue.js"></script> </head> <body> &l
vue实现todolist功能、todolist组件拆分及todolist的删除功能
10-17
在这个教程中，我们将探讨如何使用Vue实现一个基本的待办事项（TodoList）功能，包括组件拆分和删除功能。 首先，让我们看一个简单的TodoList功能的实现。在HTML中，我们有一个`<input>`元素和一个提交按钮，它们...
Vue实现todolist删除功能
08-27
在本文中，我们将深入探讨如何使用Vue.js框架来实现一个基本的待办事项列表（Todo List）应用，特别是关注删除功能的实现。Vue.js是一个轻量级的前端JavaScript框架，以其响应式数据绑定和组件化特性而受到广泛欢迎...
vue实现ToDoList简单实例
08-31
总的来说，Vue.js实现的ToDoList应用是一个很好的学习项目，它展示了Vue.js的基本用法，如数据绑定、事件处理和条件渲染。通过这个实例，开发者可以深入了解Vue.js如何与HTML、CSS和JavaScript协作，创建动态且交互...
Vue实现简易TodoList
liaoai的博客
02-23 4856
文章目录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
CathyleeQ的博客
03-11 3219
文章目录1. 模块拆分![在这里插入图片描述](https://img-blog.csdnimg.cn/e6764c9f72444133ad19f131e2cfc866.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUmVhZHkgdG8gZ28=,size_20,color_FFFFFF,t_70,g_se,x_16)2.静态页面搭建1.案例目录2.主页 index.html3.main.js4.A
ToDoList待办事件（Vue实现）详解
最新发布
weixin_55355282的博客
09-15 1453
组件化编程流程：（1）拆分静态组件：组件按照功能点拆分，命名不与html元素冲突。（2）实现动态组件：考虑好数据的存放位置，数据是一个组件在用（放在组件自身），还是一些组件在用（放在共同的父组件上面）。（3）实现交互：从绑定事件开始。props适用于：(1).父组件=>子组件 通信(2).子组件==>父组件通信（父组件先给子组件一个函数）使用v-model时要切记：v-model绑定的值不能使props传过来的，因为props是不可以修改的。
[Vue3实操] 开发Todo List
weixin_30230009的博客
04-06 2637
前言使用Vue3最新的Composition API，开发一个Todo List应用。Todo List应用比较简单，不会使用其他复杂的Vue3组件，但这也使得当前应用与真实的应用脱钩，所以本文重点是体会Vue3的最新语法，下篇文章会阅读element-plus-admin开源项目的源码，从而掌握Vue3目前最近技术栈的使用方式。所谓Todo List应用主要用于记录你需...
Vue实例-Todo-list案例
anxiangzsq的博客
08-10 863
基本效果图组件化编码流程(通用)1.实现静态组件:抽取组件，使用组件实现静态页面效果2.展示动态数据:2.1.数据的类型、名称是什么?2.2.数据保存在哪个组件?3.交互一从绑定事件监听开始。
Vue实现TodoList
qq_60754128的博客
11-03 648
components文件夹存放静态的组件pages存放路由组件router中只有一个js文件，用于配置相应的路由内容App组件为其实是页面，即注册登录页面。
Vue：实现TodoList案例（尚硅谷）
做一只猫的博客
08-04 9573
TodoList案例
Vue实现简单的todolist
qq_46362763的博客
05-09 1220
1、在输入框中输入内容后点击添加，即可把内容添加到下面的列表中（如果内容为空则不添加） 2、点击复选框，实现选中或不选中效果（即完成或未完成） 3、鼠标移入列表，会出现一个删除按钮，点击删除按钮即可删除该列表 4、已经添加的列表任务，即便关闭浏览器或者电脑，下次打开任务还在列表中（用到了本地存储） 直接上代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&
vue实现todolist
05-14
好的，下面是一个简单的Vue实现todolist的例子： 首先在HTML中定义一个输入框和一个按钮，用于添加待办事项： ``` <button @click="addTodo">Add ``` 然后在Vue实例中定义一个data属性newTodo，用于存储用户...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值