待做的事情

{{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. java selenium 自动化笔记-不是0基础,至少有java基础

    本来今天要学GitHub的,但是在群里问了下小伙伴时被暴击.说我学的东西太多太杂,不是很深入,都是皮毛.哎~自己早深有意识到,因个人能力吧,找的资料都不是很全,加上实际工作没有应用到.所以写一篇sel ...

  2. Scrapy项目 - 源码工程 - 实现豆瓣 Top250 电影信息爬取的爬虫设计

    一.项目目录结构 spiders文件夹内包含doubanSpider.py文件,对于项目的构建以及结构逻辑,详见环境搭建篇. 二.项目源码 1.doubanSpider.py # -*- coding ...

  3. Spring Boot (七): Mybatis极简配置

    Spring Boot (七): Mybatis极简配置 1. 前言 ORM 框架的目的是简化编程中的数据库操作,经过这么多年的发展,基本上活到现在的就剩下两家了,一个是宣称可以不用写 SQL 的 H ...

  4. Java之字符流读写文件、文件的拷贝

    字符流读数据 – 按单个字符读取 创建字符流读文件对象: Reader reader = new FileReader("readme.txt"); 调用方法读取数据: int d ...

  5. 【ADO.NET基础】——数据库连接

    SQL Sever连接字符串 (1)标准的安全连接 Data Source=myServerAddress;Initial Catalog=myDataBase;User Id=myUsername; ...

  6. 什么是VR中的vection?

    Vection是VR领域的一个专有名词,其义指“在虚拟现实中给人带来‘移动’(self-motion)感觉的认知因素”1.也就是说,vection就是指那些给玩家带来“我正在这个虚拟环境中移动”这种感 ...

  7. yii中缓存(cache)详解 - 彼岸あ年華ツ

    缓存是用于提升网站性能的一种即简单又有效的途径.通过存储相对静态的数据至缓存以备所需,我们可以省去生成 这些数据的时间.在 Yii 中使用缓存主要包括配置和访问缓存组件 . 内部方法 一.缓存配置: ...

  8. Kylin构建Cube过程详解

    1 前言 在使用Kylin的时候,最重要的一步就是创建cube的模型定义,即指定度量和维度以及一些附加信息,然后对cube进行build,当然我们也可以根据原始表中的某一个string字段(这个字段的 ...

  9. 我最推荐的一张Java后端学习路线图,Java工程师必备

    前言 学习路线图往往是学习一样技术的入门指南.网上搜到的Java学习路线图也是一抓一大把. 今天我只选一张图,仅此一图,足以包罗Java后端技术的知识点.所谓不求最好,但求最全,学习Java后端的同学 ...

  10. Asp.net内置对象用途说明

    Asp.net 内置对象 1.Session当客户第一次请求网页,session创建.当客户最后一次请求页面,一段时间后,session销毁.默认30分钟. 一般存用户信息,即登陆成功后,在sessi ...