待做的事情

{{item}} 完成

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<style type="text/css">

			.done .content{

				text-decoration: line-through;

			}

		</style>

		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

	</head>

	<body>

		<div id="app">

			<div class="nav">

				<input type="text" v-model='todoInput' placeholder="请输入你即将要做的事情" @keydown.enter='inputText' name="" id="" value="" />

			</div>

			<div class="todo">

				<h1>待做的事情</h1>

				<div class="todoItem" v-for='(item,index) in todoList'>

					<span class="content">{{item}}</span>

					<span class="btn" @click='done($event,index)'>完成</span>

				</div>

			</div>

			<div class="done">

				<h1>已完成的事情</h1>

				<div class="todoItem" v-for='item in doneList'>

					<span class="content">{{item}}</span>

				</div>

			</div>

		</div>

		<!--

			localstorage:永久性的保留,保存是以字符串的形式存储

			sessionStorage:一个会话期间保留,保存是以字符串的形式存储

			dotoList:

			1/输入框的内容跟数据模型进行绑定,(并且查看localstorage是否有之前的数据，如果有那么将其放置进todoList、doneList)

			2、要设置1个放置待办事项的数据的数组，将每一次数据的变更保留到localstorage

			3、要设置1个放置已完成事项的数据的数组，将每一次数据的变更保留到localstorage

			4、交互事件书写(输入框是回车键按下，并且输入框有数据，才进行操作，将输入框的内容，放置到todoList数组里面)，将每一次数据的变更保留到localstorage

		-->

		<script type="text/javascript">

			var app = new Vue({

				el:'#app',

				data:{

					todoInput:'',//1/输入框的内容跟数据模型进行绑定

					todoList:[],//要设置1个放置待办事项的数据的数组

					doneList:[]//要设置1个放置已完成事项的数据的数组

				},

				methods:{

					inputText:function(e){

						if(e.key=='Enter'){

							console.log(e)

							if(this.todoInput){

								this.todoList.push(this.todoInput)

								console.log(this.todoList)

								localStorage.todoList = JSON.stringify(this.todoList)

							}

						}

					},

					done:function(e,index){

						console.log(e)

						console.log(index)

						var delItem = this.todoList.splice(index,1)

						this.doneList.push(delItem[0])

						localStorage.doneList = JSON.stringify(this.doneList)

						localStorage.todoList = JSON.stringify(this.todoList)

					}

				},

				mounted:function(){

					if(localStorage.todoList){

						this.todoList = JSON.parse(localStorage.todoList)

					}

					if(localStorage.doneList){

						this.doneList = JSON.parse(localStorage.doneList)

					}

				}

			})

		</script>

	</body>

</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. springboot系列之02-需要了解的宏观知识点

    未经允许,不得转载 原作者:字母哥博客 本文完整系列出自:springboot深入浅出系列 一.Spring Boot . Spring MVC .Spring对比 首先你需要明白一件事情:Sprin ...

  2. Angular ngx-echarts图表

    1. 安装echarts包.ngx-echarts包 npm install echarts --save npm install ngx-echarts --save 2. angular.json ...

  3. OpenGl 导入读取多个3D模型 并且添加鼠标控制移动旋转

    原文作者:aircraft 原文链接:https://www.cnblogs.com/DOMLX/p/11627508.html 前言: 因为接下来的项目需求是要读取多个3D模型,并且移动拼接,那么我 ...

  4. Spring Cloud 版本控制

    ### 正常版本 ``` org.springframework.boot spring-boot-starter-parent 2.1.7.RELEASE ``` ### SpringCloud 版 ...

  5. 大头儿子和小头爸爸的战斗--java字符和字符串

    故事背景 一座普普通通的小屋里,住着大头儿子.小头爸爸和围裙妈妈.在他们普普通通的生活中,总是响起充满欢乐的笑声.最温暖的家又成了他们每个人的爱的源泉. <大头儿子和小头爸爸>是孩子居首( ...

  6. SpringBoot使用thymeleaf模板引擎引起的模板视图解析错误

    Whitelabel Error Page This application has no explicit mapping for /error, so you are seeing this as ...

  7. 访问http接口时返回502 Bad Getway什么原因怎么解决

    使用 httpclient 工具通过代理服务器请求第三方http 接口,多次返回 502 Bad Getway,少数返回正常. 502 Bad Getway是什么意思? 502 Bad Gateway ...

  8. python编程基础之三十三

    构造方法: 目的:构造方法用于初始化对象,可以在构造方法中添加成员属性 触发时机:实例化对象的时候自动调用 参数:第一个参数必须是self,其它参数根据需要自己定义 返回值:不返回值,或者说返回Non ...

  9. ubuntu14.04 安装tensorflow始末

    基于ubuntu14.04 干净的系统一步步遇到的坑记录下来: 怀着平静学习的心情,问题总的能解决的! 1. 首先看了下当前python版本 python --version Python 2.7.6 ...

  10. 洛谷NOIp热身赛 T2123 数列游戏

    题目背景 此题为改编题,特别鸣谢倪星宇同学. 有一次,HKE和LJC在玩一个游戏. 题目描述 游戏的规则是这样的:LJC在纸上写下两个长度均为N的数列A和B,两个数列一一对应.HKE每次可以找两个相邻 ...