待做的事情

{{item}} 完成

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title></title>
  6. 		<style type="text/css">
  7. 			.done .content{
  8. 				text-decoration: line-through;
  9. 			}
  10. 		</style>
  11. 		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  12. 	</head>
  13. 	<body>
  14. 		<div id="app">
  15. 			<div class="nav">
  16. 				<input type="text" v-model='todoInput' placeholder="请输入你即将要做的事情" @keydown.enter='inputText' name="" id="" value="" />
  17. 			</div>
  18. 			<div class="todo">
  19. 				<h1>待做的事情</h1>
  20. 				<div class="todoItem" v-for='(item,index) in todoList'>
  21. 					<span class="content">{{item}}</span>
  22. 					<span class="btn" @click='done($event,index)'>完成</span>
  23. 				</div>
  24. 			</div>
  25. 			<div class="done">
  26. 				<h1>已完成的事情</h1>
  27. 				<div class="todoItem" v-for='item in doneList'>
  28. 					<span class="content">{{item}}</span>
  29. 				</div>
  30. 			</div>
  31.  
  32. 		</div>
  33. 		<!--
  34. 			localstorage:永久性的保留,保存是以字符串的形式存储
  35. 			sessionStorage:一个会话期间保留,保存是以字符串的形式存储
  36.  
  37. 			dotoList:
  38. 			1/输入框的内容跟数据模型进行绑定,(并且查看localstorage是否有之前的数据，如果有那么将其放置进todoList、doneList)
  39. 			2、要设置1个放置待办事项的数据的数组，将每一次数据的变更保留到localstorage
  40. 			3、要设置1个放置已完成事项的数据的数组，将每一次数据的变更保留到localstorage
  41. 			4、交互事件书写(输入框是回车键按下，并且输入框有数据，才进行操作，将输入框的内容，放置到todoList数组里面)，将每一次数据的变更保留到localstorage
  42. 		-->
  43. 		<script type="text/javascript">
  44. 			var app = new Vue({
  45. 				el:'#app',
  46. 				data:{
  47. 					todoInput:'',//1/输入框的内容跟数据模型进行绑定
  48. 					todoList:[],//要设置1个放置待办事项的数据的数组
  49. 					doneList:[]//要设置1个放置已完成事项的数据的数组
  50. 				},
  51. 				methods:{
  52. 					inputText:function(e){
  53. 						if(e.key=='Enter'){
  54. 							console.log(e)
  55. 							if(this.todoInput){
  56. 								this.todoList.push(this.todoInput)
  57. 								console.log(this.todoList)
  58. 								localStorage.todoList = JSON.stringify(this.todoList)
  59.  
  60. 							}
  61. 						}
  62.  
  63. 					},
  64. 					done:function(e,index){
  65. 						console.log(e)
  66. 						console.log(index)
  67. 						var delItem = this.todoList.splice(index,1)
  68. 						this.doneList.push(delItem[0])
  69. 						localStorage.doneList = JSON.stringify(this.doneList)
  70. 						localStorage.todoList = JSON.stringify(this.todoList)
  71.  
  72. 					}
  73. 				},
  74. 				mounted:function(){
  75.  
  76. 					if(localStorage.todoList){
  77. 						this.todoList = JSON.parse(localStorage.todoList)
  78.  
  79. 					}
  80. 					if(localStorage.doneList){
  81. 						this.doneList = JSON.parse(localStorage.doneList)
  82. 					}
  83.  
  84. 				}
  85. 			})
  86. 		</script>
  87. 	</body>
  88. </html>

　　

已完成的事情

{{item}}

todoList.html的更多相关文章

  1. Vue.js基础篇实战--一个ToDoList小应用

    距离开始学Vue已经过去一个多月了,总想把学到的东西柔和在一起,做点东西出来,于是有了这个Todolist小应用. 使用vuex 纯粹基础,没有用到web pack,vuex,npm,下次把它改造一下 ...

  2. 重写官方TodoList，对于初学react+redux的人来说，很有好处

    虽然官网的TodoList的例子写的很详细,但是都是一步到位,就是给你一个action,好家伙,全部都写好了,给你一个reducer,所有功能也是都写好了,但是我们这些小白怎么可能一下就消化那么多,那 ...

  3. [vue案例的知识点]todo-list

    文章的原材料来自于vue的官方示例:https://cn.vuejs.org/v2/examples/todomvc.html,我们在学习过程中,试着对其中的一些知识点进行记录: 一.浏览器数据存储, ...

  4. 用vuejs实现一个todolist项目

    用vue.js实现一个todolist项目:input输入框输入的值会呈现在下方,并且会保存在localStorage里面,而且下方的列表点击之后也会有变化: 完整代码: App.vue <te ...

  5. 基于angular写的一个todolist

    对于新手来说,使用angularjs写一个todolist可以快速入门

  6. 使用React并做一个简单的to-do-list

    1. 前言 说到React,我从一年之前就开始试着了解并且看了相关的入门教程,而且还买过一本<React:引领未来的用户界面开发框架 >拜读.React的轻量组件化的思想及其virtual ...

  7. jquery实现TODOList

    html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  8. Android程序ToDoList增加配置项页面

    本文要做的事情就是在前面做的简单的ToDoList程序上增加一个配置项页面(Reference).这个Reference页面也非常简单: 这个ToDoList现在有两个页面,主页面能填写待办事项,然后 ...

  9. Android程序ToDoList

    本文的目的是创建一个简单的ToDoList列表. 这个应用的功能是记录我的代办事项,简单到不需要本地存储,所有的代办事项都只是存储在内存中,就是只有程序打开的时候可以增加查看代办事项,当程序关闭的时候 ...

  10. ToDoList：一款非常优秀的任务管理软件 —— 工具类

    ToDoList是一款非常优秀的任务管理软件,用户可以方便地组织和安排计划.这是一个开源的项目,很多细节都考虑到了,推荐大家使用~ ToDoList 帮你把要做的事情列出来,一项一项,类似思维导图. ...

随机推荐

  1. pycharm远程代码调试

    1.pycharm连接linux服务器并上传功能 # Tools-->Deployment-->Configuration # 点击+号,选择SFTP类型,name填项目名字-->填 ...

  2. Kubernetes 系列（四）：使用Traefik访问.net core api

    一. 准备 本篇的要求是在前三篇的基础上已经搭建好的本地k8s以及部署了Traefik,我们将会使用Traefik Ingress来访问.net core api,比较简单,做个记录,如果还没有搭建k ...

  3. Unity进阶技巧 - RectTransform详解

    前言 最近要做UI,有时候需要在代码中调整改变UI控件的属性,比如位置.大小等,然而在NGUI里面,控制UI控件的位置等属性的是RectTransform这个组件,这个组件继承自Transform组件 ...

  4. 织梦cms列表页获取标签

    <!-- 标签 --> [field:id runphp='yes'] global $cfg_cmspath; $tags = GetTags(@me); $revalue = ''; ...

  5. Inkscape 旋转并复制

    画一个图形,点击图标. 然后图标中心有个十字叉, 然后把这个十字叉拖到你想要旋转的地方. 然后shift+ctrl+m打开变换菜单. 选择旋转选项卡,然后设置角度,点击应用.就可以旋转了,如果配合ct ...

  6. Feign【入门】

    feign简介: feign是一种声明式,模板化的HTTP客户端,spring cloud对feign进行了增强,使其支持SpringMvc的相关注解,并整合了ribbon做负载均衡.在spring ...

  7. Word文档操作知识

    Word文档操作知识 #持续更新 本次更新时间:2019-03-06 14:34 一.换行时字体空间过大 问题情景:当我们编写中文的文档时,中间插入了西方的字体或符号,在以它为行尾换行时: 会出现字体 ...

  8. CSS实现带箭头的提示框

    我们在很多UI框架中看到带箭头的提示框,感觉挺漂亮,但是之前一直不知道其原理,今天网上找了些资料算是弄清楚原理了: 先上效果图: 原理分析: 上面的箭头有没有觉得很像一个三角形,是的,它就是三角形:只 ...

  9. web 前端优化-戈多编程

    大家好,我是戈多,从事web开发工作接近三年了,今天来归纳下web前端优化的解决方案(码农搬砖工,来自各网络汇总) 1.减少Http请求 http请求越多,那么消耗的时间越多,如果在加上网络很糟糕,那 ...

  10. 统计字符的个数，能够组成几个acmicpc

    Problem F. String Input file:                  standard input Output file:               standard ou ...