1、store.js(读取写入到localstorage)

const STORAGE_KEY="todos-vuejs"
export default{
fetch(){
return JSON.parse(window.localStorage.getItem(
STORAGE_KEY||"[]"))
},
save(items){
window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items))
}
}

2、App.vue

<template>
<div id="app">
<h1>{{title}}</h1>
<h1 v-text="title"></h1>
<h1 v-html="title"></h1>
<input type="text" v-model="newItem" v-on:keyup.enter="addNew">
<ul>
<li v-for="item in items" v-bind:class="{finished:item.isFinished}" v-on:click="toggleFinish(item)">
{{item.label}}
</li>
</ul> </div>
</template> <script>
import Store from './Store'
//console.log(Store)
export default { data () {
return {
title: '<span>?</span>this is a todolist',
items:Store.fetch(),
// items:[
// {
// label:'coding',
// isFinished:false // },
// {
// label:'walking',
// isFinished:true // }
// ],
newItem:''
}
},
watch:{
items:{
handler:function(items){
// console.log(val,oldVal)
// console.log(items); Store.save(items);
// console.log(items); }
},
deep:true//也检测items内部的key的变化
},
methods:{
toggleFinish:function(item){
// console.log(item);
item.isFinished=!item.isFinished;
console.log(this.items);
},
addNew:function(){
// this.newItem;
// console.log(this.newItem);
this.items.push({
label:this.newItem,
isFinished:false
})
this.newItem='';
}
}
}
</script> <style>
.finished{
text-decoration:underline;
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

vue中使用localstorage的更多相关文章

  1. vue中使用localStorage存储信息

    一 什么是localStorage 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionSto ...

  2. vue中操作localstorage

    首先在子组件将localstorage方法进行封装 在父组件中对其进行引用 将输入的值存入到定义的searchHistory数组中,存储localstorage需要传两个参数,变量名为searchHi ...

  3. vue中 localStorage的使用方法(详解)

    vue中实现本地储存的方法:localStorage,在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cooki ...

  4. vue中Axios的封装和API接口的管理

    前端小白的声明: 这篇文章为转载:主要是为了方便自己查阅学习.如果对原博主造成侵犯,我会立即删除. 转载地址:点击查看 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题 ...

  5. 学习笔记——在vue中如何配置Jest(一)

    最近在搞Jest单元测试,如何在vue中安装和使用jest我就不说了,前一篇文章简单的说了一下在使用jest时遇到的一些问题,但是我觉得并没有真正的解决的很好.后面会在学习过程中更新前面的那篇文章,加 ...

  6. vue中的路由独享守卫的理解

    1.vue中路由独享守卫意思就是对这个路由有一个单独的守卫,因为他的守卫方式于其他的凡是不太同 独享守卫于前置守卫使用方法大致是一样的 在路由配置的时候进行配置, { path:'/login', c ...

  7. 【翻译】使用Vuex解决Vue中的身份验证

    翻译原文链接:https://scotch.io/tutorials/handling-authentication-in-vue-using-vuex 我的翻译小站:https://www.zcfy ...

  8. vue中如何实现数据的双向绑定

    vue中如何实现数据的双向绑定 实现视图变化数据跟着变:分两步,上面get中的为第二步(即再次读取的时候会调用get方法得到之前设置的值,以此来实现动态改变) 由于直接写obj.name = this ...

  9. vue中遇到的坑

    如何解决在vue中替换图片.一个使用base64,而我们使用zepto之后,src找不到资源,因为已经打包了,难道强行写base64. 1. 引入文件时语法很重要! import "Foot ...

随机推荐

  1. Java采用Hibernate连接MySQL

    现有环境: Java JDK1.8 MySQL5.7 [ps]本文是很早前的基于隐马尔科夫模型进行中文词性标注的后续升级完善版,任务就是将之前的写入文件的模型参数写入MySQL 下载Hibernate ...

  2. SparseArray源码解析

    转载自SparseArray源码解析 No1: Android官方推荐:当使用HashMap(K, V),如果K为整数类型时,使用SparseArray的效率更高. No2: HashMap是使用数组 ...

  3. pandas学习(创建多层索引、数据重塑与轴向旋转)

    pandas学习(创建多层索引.数据重塑与轴向旋转) 目录 创建多层索引 数据重塑与轴向旋转 创建多层索引 隐式构造 Series 最常见的方法是给DataFrame构造函数的index参数传递两个或 ...

  4. Spring 自动定时任务配置

    Spring中可以通过配置方便的实现周期性定时任务管理,这需要用到以下几个类: org.springframework.scheduling.quartz.MethodInvokingJobDetai ...

  5. supervisor 管理 celery

    安装supervisor [root@ipv6-api ~]# pip3 install  supervisor 生成配置文件 [root@ipv6-api ~]#echo_supervisord_c ...

  6. 洛谷.1919.[模板]A*B Problem升级版(FFT)

    题目链接:洛谷.BZOJ2179 //将乘数拆成 a0*10^n + a1*10^(n-1) + ... + a_n-1的形式 //可以发现多项式乘法就模拟了竖式乘法 所以用FFT即可 注意处理进位 ...

  7. failed to initialize unity graphics 错误解决方法(win7 unity4.x)

    重装系统后 unity  4.7.2安装之后,破解完毕就有了个Fatal error; 提示信息为:failed to initialize unity graphics 解决办法:依旧是先查看了网上 ...

  8. windows环境下面批量新建文件夹

    md D:批量新建文件夹\2026 md D:批量新建文件夹\2030 md D:批量新建文件夹\2032 md D:批量新建文件夹\1835 md D:批量新建文件夹\1832 电脑桌面新建文档 - ...

  9. 在数据库繁忙时如何快速有效的关闭MySQL服务

    如果InnoDB_buffer_size参数很大,缓冲区内的脏数据太多,那么关闭MySQL的时候必须把脏数据刷新到磁盘,这个过程有可能是很漫长的,从而导致关闭MySQL服务的时间过长.可以临时设置in ...

  10. Android性能优化-App启动优化

    原文地址:https://developer.android.com/topic/performance/launch-time.html#common 通常用户期望app响应和加载速度越快越好.一个 ...