vue模块化以及封装Storage组件实现保存搜索的历史记录
<template> <div id="app"> <input type="text" v-model='todo' @keydown="doAdd($event)" /> <hr>
<br> <h2>进行中</h2> <ul> <li v-for="(item,key) in list" v-if="!item.checked">
<input type="checkbox" v-model="item.checked" @change="saveList()" /> {{item.title}} -- <button @click="removeData(key)">删除</button>
</li>
</ul> <br>
<br>
<h2>已完成</h2> <ul>
<li v-for="(item,key) in list" v-if="item.checked">
<input type="checkbox" v-model="item.checked" @change="saveList()" /> {{item.title}} -- <button @click="removeData(key)">删除</button>
</li>
</ul>
</div>
</template> <script> import storage from './model/storage.js'; // console.log(storage); export default {
data () {
return { todo:'' ,
list: []
}
},
methods:{ doAdd(e){
// console.log(e);
if(e.keyCode==13){
this.list.push({
title:this.todo,
checked:false
})
} storage.set('list',this.list);
},
removeData(key){ this.list.splice(key,1) storage.set('list',this.list);
}
, saveList(){ storage.set('list',this.list);
} },mounted(){ /*生命周期函数 vue页面刷新就会触发的方法*/ var list=storage.get('list'); if(list){ /*注意判断*/
this.list=list;
}
} }
</script> <style lang="scss"> .finish{ li{
background:#eee;
}
} </style>
//封装操作localstorage本地存储的方法 模块化的文件 // nodejs 基础
//storage.js 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;
vue模块化以及封装Storage组件实现保存搜索的历史记录的更多相关文章
- vue2.* 事件结合双向数据绑定、模块化以及封装Storage实现todolist 待办事项 已经完成 和进行中持久化 06
ceshi.vue <template> <div id="app"> <input type='text' v-model='todo' @keyd ...
- vue 封装分页组件
分页 一般都是调接口, 接口为这种格式 {code: 0, msg: "success",…} code:0 data:{ content:[{content: "11& ...
- 使用Vue CLI 3将基于element-ui二次封装的组件发布到npm
前言:之前在网上找的好多都是基于vue-cli 2.x的,而使用vue-cli 3的文章比较少,Vue CLI 3 中文文档,所以我在自己尝试的时候把几篇文章结合了一下,调出来了我想要的模式,也就是V ...
- Vue.use源码分析(转)+如何封装一个组件
封装一个组件:https://www.jianshu.com/p/89a05706917a 我想有过vue开发经验的,对于vue.use并不陌生.当使用vue-resource或vue-router等 ...
- Vue.js 2.x:组件的定义和注册(详细的图文教程)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 什么是组件 组件: 组件的出现,就是为了拆分Vue实例的代码量的, ...
- Vue.js 相关知识(组件)
1. 组件介绍 组件(component),vue.js最强大的功能之一 作用:封装可重用的代码,通常一个组件就是一个功能体,便于在多个地方都能调用该功能体 根组件:我们实例化的Vue对象就是一个组件 ...
- Vue简单基础 + 实例 及 组件通信
vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...
- vue项目环境搭建与组件介绍
Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内 ...
- vue.js中的全局组件和局部组件
组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能. 组件的使用有三 ...
随机推荐
- 从零开始配置MacBook Pro
购买macbook, 是因为它的效率性.由于我第一次使用macbook,所以按照我开发的习惯和参照了其他人的文章进行配置我的个人mac,希望我的设置对你们也有所帮助 1.基本配置 查找我的Mac 系统 ...
- 【ocata】计算节点的 neutron 报错
挂起/关闭实例时,/var/log/neutron/linuxbridge-agent.log中报错,但不影响使用 -- :: INFO neutron.plugins.ml2.drivers.age ...
- Alpha冲刺随笔六:第六天
课程名称:软件工程1916|W(福州大学) 作业要求:项目Alpha冲刺(十天冲刺) 团队名称:葫芦娃队 作业目标:在十天冲刺里对每天的任务进行总结. 随笔汇总:https://www.cnblogs ...
- java -static的特性和使用,静态类/方法/块/内部类/回收机制
mark一下,今天的作业. java-core P115 如果将域定义为static,每个类中只有一个这样的域.(这里的域应该是指一片物理数据空间,而不是单纯的指代某一个变量,而是静态域). publ ...
- ldap系列-基础知识
来源:关键字排名 ldap 是什么? LDAP(Lightweight Directory Access Protocol)即轻量级目录访问协议,提供信息服务.那啥是目录服务呢? 目录服务是一种特殊的 ...
- java 反射获取字段为List类型中的泛型类型
在java编程时,经常会使用反射去处理对象,有时会需要知道List的泛型类型:示例操作如下 obj = pojo.newInstance(); // 首先得到pojo所定义的字段 Field[] fi ...
- jquery定义链接跳转的高亮显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Java使用IE浏览器下载文件,文件名乱码问题
String userAgent = request.getHeader("user-agent").toLowerCase(); if (userAgent.contains(& ...
- make 的使用参数
- 洛谷 P4058 [Code+#1]木材 题解
P4058 [Code+#1]木材 题目描述 有 \(n\) 棵树,初始时每棵树的高度为 \(H_i\),第 \(i\) 棵树每月都会长高 \(A_i\).现在有个木料长度总量为 $ S$ 的订单, ...