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 的编译器为它添加特殊功能. 组件的使用有三 ...
随机推荐
- C#屏蔽Alt+F4组合键
在开发的软件不希望用户关闭的情况下,或者我们不想用户回到桌面,这时候我们就需要屏蔽windows键,或者Alt + F4 键等. //1.将窗体的属性KeyPrieview设置为true //keyp ...
- Mongodb的安装--简单快速
由于需要在服务器安装mongodb,所以就对Mongodb的安装进行了了研究,在了解安装过程之前,先了解一下Mongodb,Mongodb是什么? 是什么? MongDB是结余关系数据库和非关系数据库 ...
- JQuery系列(1) - 选择器、构造函数、实例方法
概述 JQuery是一个JavaScript库,jQuery的核心思想是“先选中某些网页元素,然后对其进行某种处理”(find something, do something),也就是说,先选择后处理 ...
- oracle中日期相关的区间
and czrqb.lsrqb_rh_sj >= to_date('[?query_date_begin|2011-09-01?]A', 'yyyy-mm-dd') and czrqb.lsrq ...
- LightOJ - 1259 - Goldbach`s Conjecture(整数分解定理)
链接: https://vjudge.net/problem/LightOJ-1259 题意: Goldbach's conjecture is one of the oldest unsolved ...
- kafka一致性语义保证
一.消息传递语义:三种,至少一次,至多一次,精确一次 1.at lest once:消息不丢,但可能重复 2.at most once:消息会丢,但不会重复 3.Exactly Once:消息不丢,也 ...
- UWB DWM1000 开源项目框架 之 温度采集
在之前博文开源一套uwb 框架,后面几篇博文会基于这个开源框架进行简单开发. 让uwb使用者更清楚了解基于这个basecode 开发工作. 这里所做内容是,采集dwm1000 温度,并发送到另一个节点 ...
- Sublime 原版安装
sublime text3 安装方法 ① 官网下载安装 https://www.sublimetext.com/3 ② 更改hosts文件 具体方法如下: windows系统的hosts文件在C:\W ...
- sql server 中的表值函数和标量值函数
顾名思义:表值函数返回的是表,而标量值函数可以返回基类型 一.表值函数 用户定义表值函数返回 table 数据类型.对于内联表值函数,没有函数主体:表是单个 SELECT 语句的结果集. 以下示例 ...
- C语言实现金字塔
#include <stdio.h> int main(void) { int i=0, j =0, k= 0, line; printf("请输入金字塔的总行数:") ...