ceshi.vue

<template>
<div id="app">
<input type='text' v-model='todo' @keydown="doAdd($event)" />
<button @click="doAdd($event)">+增加</button>
<br>
<hr>
<br>
<h2>进行中</h2>
<ul>
<li v-for="(item,key) in list" v-if="!item.checked">
<input type="checkbox" @change="saveList()" v-model="item.checked">{{item.title}} --- <button @click="removeData(key)">删除</button>
</li>
</ul>
<br>
<br>
<h2>已完成</h2>
<ul class="finish">
<li v-for="(item,key) in list" v-if="item.checked">
<input type="checkbox" @change="saveList()" v-model="item.checked">{{item.title}} --- <button @click="removeData(key)">删除</button>
</li>
</ul> <br>
<br>
<button @click="getList()">获取list的值</button> </div>
</template> <script>
import storage from './model/storage.js';
console.log(storage);
export default {
data () {/*业务逻辑里面定义的数据*/
return {
todo:'',
list:[]
}
},
methods:{/*方法*/
doAdd(e){ if(e.keyCode!==undefined){
if(e.keyCode==13){
//1、获取文本框输入的值2、把文本框的值push到list里面
this.list.push({
title:this.todo,
checked:false
});
this.todo = ''
} //localStorage.setItem('key',JSON.stringify(this.list))
storage.set('list',this.list) }else{
//1、获取文本框输入的值2、把文本框的值push到list里面
this.list.push({
title:this.todo,
checked:false
});
this.todo = '';
//localStorage.setItem('key',JSON.stringify(this.list))
storage.set('list',this.list)
} return false; },
removeData(key){
/*
splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。
arrayObject.splice(index,howmany,item1,.....,itemX)
参数 描述
index 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
howmany 必需。要删除的项目数量。如果设置为 0,则不会删除项目。
item1, ..., itemX 可选。向数组添加的新项目。
*/
this.list.splice(key,1);
//localStorage.setItem('list',JSON.stringify(this.list))
storage.set('list',this.list)
},
getList(){
console.log(this.list)
},
saveList(){
//localStorage.setItem('list',JSON.stringify(this.list))
storage.set('list',this.list)
}
},
mounted(){/* 生命周期函数 vue页面刷新就会触发的方法 */
//var list = JSON.parse(localStorage.getItem('list'));
var list = storage.get('list')
//判断是否存在
if(list){
this.list = list;
} }
}
</script> <style>
.finish {
li {background:#eee;}
}
</style>

model/storage.js

//封装操作local storage本地存储的方法  模块化的文件

var storage = {
set(key,value){
localStorage.setItem(key,JSON.stringify(value));
},
get(key){
return JSON.parse(localStorage.getItem(key));
},
remove(key){
localStorage.removeItem(key)
} } export default storage;

vue2.* 事件结合双向数据绑定、模块化以及封装Storage实现todolist 待办事项 已经完成 和进行中持久化 06的更多相关文章

  1. vue.js--基础 事件结合双向数据绑定实现todolist 待办事项 已经完成 和进行中,键盘事件

    <template> <div id="app"> <h1>{{ msg }}</h1> <input type=" ...

  2. Vue 事件结合双向数据绑定实现todolist 待办事项 已经完成 和进行中

    <template> <div id="app"> <input type="text" v-model='todo' @keyd ...

  3. vue2组件之间双向数据绑定问题

    最近在使用element-ui的dialog组件二次封装成独立组件使用时,子组件需要将关闭dialog状态返回给父组件,简单的说就是要实现父子组件之间的数据双向绑定问题. 大致代码如下: 1,父组件 ...

  4. Vue绑定事件,双向数据绑定,只是循环没那么简单

    v-on对象处理 <p @mouseover = "doTish" @mouseout = "doThat"> 对象形式 </p> &l ...

  5. Vue: 一个简单的Vue2.0 v-model双向数据绑定的实现,含源代码,小白也能看懂

    首先说一下原理吧 View层(dom元素)的变动如何响应到Model层(Js变量)呢? 通过监听元素的input事件来动态的改变js变量的值,实际上不是改变的js变量的值,而是改变的js变量的gett ...

  6. vue.js--基础 事件结合双向数据绑定实现todolist,增加和删除功能

    原理很简单,写一个input框,定义一个空的list,当在input中增加数据时,就往list中添加数据,然后在循环这个list的数据,删除数据就是调用list中的splice <templat ...

  7. vue 事件结合双向数据绑定实现todolist

    <template> <div id="app"> <input type="text" v-model='todo' /> ...

  8. vue模块化以及封装Storage组件实现保存搜索的历史记录

    <template> <div id="app"> <input type="text" v-model='todo' @keyd ...

  9. angularjs探秘<四> 双向数据绑定

    双向数据绑定是angularjs的一大特性,这个特性在实际开发中省了不少事儿.之前第二篇提过数据绑定,这一篇从实际开发的案例中具体看下双向数据绑定的便捷. 首先看一个场景: 在 注册/登录 中经常遇到 ...

随机推荐

  1. Python rest-framework 中类的继承关系(as_view)

    一. 背景 最近几天一直在学习restful framework的源代码,用户请求的流程,在路由系统这块遇到一个疑问,关于类的继承关系,当请求进来到路由这块,执行as_view()方法的时候,为什么会 ...

  2. Linux 文件缓存 (二)

    close系统调用入口1. 首先来到系统调用入口,主要使用__close_fd进行了具体的处理过程,并没有耗时操作.(current->files表示进程当前打开文件表信息,fd为需要关闭的文件 ...

  3. python学习之老男孩python全栈第九期_day029知识点总结——configparser模快、logging模块

    一. configparser模块 生成文档 import configparser config = configparser.ConfigParser() config[', 'Compressi ...

  4. 一文告诉你 Event Loop 是什么?

    Event Loop 也叫做"事件循环",它其实与 JavaScript 的运行机制有关. JS初始设计 JavaScript 在设计之初便是单线程,程序运行时,只有一个线程存在, ...

  5. 【PyQt5 学习记录】009:批量创建组件并查找

    这里需要在创建组件时使用 setObjectName() 为其添加 objectName 属性,再通过 findChild() 或者 findChildren() 函数来查找. 举个栗子,批量创建10 ...

  6. PHP 抽象类实现接口注意事项(含PHP与.Net的区别)

    最近在学习Drupal8,看到源码里面一个抽象类BlockBase实现了一个接口BlockPluginInterface,但是并没有实现该接口的所有方法.然后我就不淡定了,因为之前是做.NET的,记忆 ...

  7. react里 MD5加密

    https://www.f2td.com/2018/11/13/encrypt-the-user-password-with-md5/

  8. XHTML和HTML有什么区别

    HTML与XHTML之间的差别,主要分为功能上的差别和书写习惯的差别两方面. 关于功能上的差别,主要是XHTML可兼容各大浏览器.手机以及PDA,并且浏览器也能快速正确地编译网页. 由于XHTML的语 ...

  9. CentOS7系列--1.6CentOS7配置sudo

    CentOS7配置sudo 如果一些用户共享权限,配置sudo是为了分离用户的职责 1. 将root 的权限传递给所有用户 [root@centos7 ~]# visudo 添加下面的内容到最后一行, ...

  10. House of Roman 实战

    前言 这是前几天国外一个 老哥 提出的一种思路 ,学习了一下感觉其中的堆布局的手法还不错,做个分享与记录. 这种利用手法的主要特点是不需要 leak libc的地址,通过 堆内存的布局 和 堆相关的漏 ...