vue todolist 封装localstorage
- //封装操作localstorage本地存储的方法 模块化的文件
- // nodejs 基础
- 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;
- <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>
vue todolist 封装localstorage的更多相关文章
- vue+elementUI封装的时间插件(有起始时间不能大于结束时间的验证)
vue+elementUI封装的时间插件(有起始时间不能大于结束时间的验证): html: <el-form-item label="活动时间" required> & ...
- MUI - 封装localStorage与plus.storage
MUI - 封装localStorage与plus.storage 2.0版本 在使用plus.storage频繁地存取数据时,可以感觉到明显的卡顿,而且很耗内存, 在切换到localstorage时 ...
- 封装LocalStorage.js
之前使用vue开发的项目频繁使用到localStorage,封装了一下 localStorage.js文件代码如下: let obj = {}; /** * putLocalStorage 把数据放到 ...
- vue axios封装以及登录token过期跳转问题
Axios配置JWT/封装插件/发送表单数据 首先请务必已仔细阅读 Axios 文档并熟悉 JWT: 中文文档 JWT 中文文档 安装 npm install axios npm install es ...
- vue axios 封装(二)
封装二: http.js import axios from 'axios' import storeHelper from './localstorageHelper' // 全局设置 const ...
- vue Axios 封装与配置项
import axios from "axios"; import qs from "qs"; import { Message } from "el ...
- vue中使用localstorage
1.store.js(读取写入到localstorage) const STORAGE_KEY="todos-vuejs" export default{ fetch(){ ret ...
- vue如何封装自己需要的方法
因为现在vue的流行,vue的各种插件都出来了,我们公司也是使用vue做项目,我自己在做项目的时候自己去琢磨了其他的插件以及结合自己对vue和es2015的理解,自己找的了一种在vue中使用封装方法的 ...
- 【vue】使用localStorage解决vuex在页面刷新后数据被清除的问题
通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...
随机推荐
- linux内核编程helloworld(中级)
传入参数 [root@bogon modules]# cat first.c #include<linux/kernel.h> #include<linux/stat.h> # ...
- <--------------------------StringBuffer的常用方法------------------------------>
StringBuffer定义: 是可变字符数组,是线程安全的可变字符序列. StringBuffer和String的区别: String是一个不可变的字符序列. 实例: public class St ...
- hiveserver 占用内存过大的问题
今天为了求解hiveserver占用内存过大的问题,特地加了hive在apache的邮件列表,讨论半天.特别说的是 里面的人确实很热情啊 ,外国人做事确实很认真,讨论帖发的时候都狠详细. 粘出一些记录 ...
- Top PG Clustering HA Solutions for PostgreSQL
转自:https://severalnines.com/blog/top-pg-clustering-ha-solutions-postgresql If your system relies on ...
- Architecture options to run a workflow engine
This week a customer called and asked (translated into my own words and shortened): “We do composite ...
- operator <<”不明确
在声明重载的输出运算符<< 时,如果声明时的返回类型是std::ostream,而不是std::ostream&,但是定义的时候又加了引用的话,那么就会报“operator < ...
- python list 转换为str
xiaoquInfo = ['暂无参考均价', '中仪花园海伦堡', '113.403781', '22.540973', '2008年建成', '塔楼', '2元/平米/月', '海伦堡物业', ' ...
- js调用.net后台事件,和后台调用前台等方法总结(转帖)
js调用.net后台事件,和后台调用前台等方法总结 原文来自:http://hi.baidu.com/xiaowei0705/blog/item/4d56163f5e4bf616bba16725.ht ...
- java 字符集 Charset
字符集就是为每个字符编个号码.如ASCII编码中,字符 'A' 的号码为 65 (或二进制01000001):GBK编码中,字符 '国' 对应的号码为47610 . 编码:将字符序列转换成二进制序列. ...
- ASP.NET AJAX入门系列(8):自定义异常处理
在UpdatePanel控件异步更新时,如果有错误发生,默认情况下会弹出一个Alert对话框显示出错误信息,这对用户来说是不友好的,本文看一下如何在服务端和客户端脚本中自定义异常处理,翻译自官方文档. ...