todoList.html
待做的事情
<!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>
已完成的事情
todoList.html的更多相关文章
- Vue.js基础篇实战--一个ToDoList小应用
距离开始学Vue已经过去一个多月了,总想把学到的东西柔和在一起,做点东西出来,于是有了这个Todolist小应用. 使用vuex 纯粹基础,没有用到web pack,vuex,npm,下次把它改造一下 ...
- 重写官方TodoList,对于初学react+redux的人来说,很有好处
虽然官网的TodoList的例子写的很详细,但是都是一步到位,就是给你一个action,好家伙,全部都写好了,给你一个reducer,所有功能也是都写好了,但是我们这些小白怎么可能一下就消化那么多,那 ...
- [vue案例的知识点]todo-list
文章的原材料来自于vue的官方示例:https://cn.vuejs.org/v2/examples/todomvc.html,我们在学习过程中,试着对其中的一些知识点进行记录: 一.浏览器数据存储, ...
- 用vuejs实现一个todolist项目
用vue.js实现一个todolist项目:input输入框输入的值会呈现在下方,并且会保存在localStorage里面,而且下方的列表点击之后也会有变化: 完整代码: App.vue <te ...
- 基于angular写的一个todolist
对于新手来说,使用angularjs写一个todolist可以快速入门
- 使用React并做一个简单的to-do-list
1. 前言 说到React,我从一年之前就开始试着了解并且看了相关的入门教程,而且还买过一本<React:引领未来的用户界面开发框架 >拜读.React的轻量组件化的思想及其virtual ...
- jquery实现TODOList
html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- Android程序ToDoList增加配置项页面
本文要做的事情就是在前面做的简单的ToDoList程序上增加一个配置项页面(Reference).这个Reference页面也非常简单: 这个ToDoList现在有两个页面,主页面能填写待办事项,然后 ...
- Android程序ToDoList
本文的目的是创建一个简单的ToDoList列表. 这个应用的功能是记录我的代办事项,简单到不需要本地存储,所有的代办事项都只是存储在内存中,就是只有程序打开的时候可以增加查看代办事项,当程序关闭的时候 ...
- ToDoList:一款非常优秀的任务管理软件 —— 工具类
ToDoList是一款非常优秀的任务管理软件,用户可以方便地组织和安排计划.这是一个开源的项目,很多细节都考虑到了,推荐大家使用~ ToDoList 帮你把要做的事情列出来,一项一项,类似思维导图. ...
随机推荐
- [apue] 使用文件记录锁无法实现父子进程交互执行同步
父子进程间交互执行是指用一种同步原语,实现父进程和子进程在某一时刻只有一个进程执行,之后由另外一个进程执行,用一段代码举例如下: SYNC_INIT(); , counter=; pid_t pid ...
- maven手动添加jar包到pom仓库
此处以顺丰jar包为例: mvn install:install-file -Dfile=D:\TSBrowserDownloads\SF-CSIM-EXPRESS-SDK-V1.-\SF-CSIM- ...
- freemarker常见语法
FreeMarker的插值有如下两种类型:1,通用插值${expr};2,数字格式化插值:#{expr}或#{expr;format} ${basketball.name?if_exists } / ...
- Git tag相关命令
常见命令如下: // 查看标签,可加上参数-l(列表形式列出) -n(附加说明) git tag [-l -n] // 查看符合检索条件的标签 git tag -l .*.* // 查看对应标签状态 ...
- java字符串,数组,集合框架重点
1.字符串的字面量是否自动生成一个字符串的变量? String str1 = “abc”; Sring str2 = new String (“abc”); 对于str1:Jvm在遇到双 ...
- 长短时记忆神经网络(LSTM)介绍以及简单应用分析
本文分为四个部分,第一部分简要介绍LSTM的应用现状:第二部分介绍LSTM的发展历史,并引出了受众多学者关注的LSTM变体——门控递归单元(GRU):第三部分介绍LSTM的基本结构,由基本循环神经网络 ...
- Kafka 学习笔记之 架构
Kafka的概念: 1. AMQP协议 Advanced Message Queuing Protocol (高级消息队列协议) The Advanced Message Queuing Protoc ...
- angular之路由
一.核心问题 路由要解决的核心问题是通过建立url和页面之间的对应的关系,使不同的页面可以通过不用的url来展示. 首先,当用户在浏览器上输入URL后,Angular将获取该URL并将其解析生成一个U ...
- javascript随机点名--案例
主要知识点涉及if选择结构判断语句.数组的定义.定时器.清除定时器.日期对象的使用. 1.HTML结构 <!DOCTYPE html> <html> <head> ...
- MYSQL SQL语句 之 select
select语句在数据库操作中是操作频率最高的语句,使用方式也是多种多样,它的基本功能是:从表中选取数据,结果存储在一个结果集中.可以联合where,and,or,Order By,distinct, ...