结合localStorage 来双向绑定数据(超级神奇)

localStorage.js:

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))
}
}

App.vue

打开Chrome浏览器控制台找到"Application - Storage - Local Storage",观察变化

<template>
<div id="app">
<h1>{{title}}</h1> <!-- <h1 v-text='title'></h1> -->
<input type="text" v-model='newItem' @keyup.enter='addItem'>
<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 Storage from './localStorage.js'
console.log(Storage)
export default {
data () {
return {
title: 'Hello World!',
items: Storage.fetch(),
newItem: ''
}
},
methods: {
toggleFinish (item) {
item.isFinished = !item.isFinished
},
addItem () {
console.log(this.newItem)
this.items.push({
label: this.newItem,
isFinished: false
})
this.newItem = ''
}
},
watch: {
items: {
handler (items) {
Storage.save(items)
},
deep: true
}
}
}
</script> <style>
.finished{text-decoration: underline;}
html {height: 100%; }
body {display: flex; align-items: center; justify-content: center; height: 100%; }
#app {color: #2c3e50; margin-top: -100px; max-width: 600px; font-family: Source Sans Pro, Helvetica, sans-serif; text-align: center; }
#app a {color: #42b983; text-decoration: none; }
.logo {width: 100px; height: 100px }
</style>

vue 结合localStorage 来双向绑定数据的更多相关文章

  1. vue双向绑定(数据劫持+发布者-订阅者模式)

    参考文献:https://www.cnblogs.com/libin-1/p/6893712.html 实现mvvm主要包含两个方面,数据变化更新视图,视图变化更新数据. 关键点在于data如何更新v ...

  2. 组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双向绑定数据

    组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双 ...

  3. 手写vue双向绑定数据

    来一张原理图: 实现思路: (1)绑定data 种的数据,为每个数据添加指令.通过Object,defineProperty() 来通知属性是否更改 (2) 找到每个DOM节点的指令.绑定事件.并绑定 ...

  4. 利用设置新数据存储结构解决vue中折叠面板双向绑定index引起的问题

    问题背景是,在进行机器性能可视化的前端开发时,使用折叠面板将不同机器的性能图表画到不同的折叠面板上去.而机器的选择利用select下拉选项来筛选. 由于在折叠面板中,通过 如下v-model双向绑定了 ...

  5. vue 自定义组件 v-model双向绑定、 父子组件同步通信

    父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa"  子组件使用$emit('update:msg', 'msg改变后的值xxx ...

  6. Vue - 如何实现一个双向绑定

    JS - 如何实现一个类似 vue 的双向绑定 Github JS 实现代码 先来看一张图: 这张图我做个简要的描述: 首先创建一个实例对象,分别触发了 compile  解析指令 和 observe ...

  7. vue 自定义组件 v-model双向绑定、 父子组件同步通信【转】

    父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa"  子组件使用$emit('update:msg', 'msg改变后的值xxx ...

  8. Vue.js 3.x 双向绑定原理

    什么是双向绑定? 废话不多说,我们先来看一个 v-model 基本的示例: <input type="text" v-model="search"> ...

  9. vue 双向绑定 数据修改但页面没刷新

    在数据改动的代码后加 this.$forceUpdate(); 若是在某个特定方法中 则将this改为方法中设定的名称

随机推荐

  1. 数学结论【p1463】[POI2002][HAOI2007]反素数

    Description 对于任何正整数x,其约数的个数记作g(x).例如g(1)=1.g(6)=4. 如果某个正整数x满足:g(x)>g(i) 0<i<x,则称x为反质数.例如,整数 ...

  2. 14、Flask实战第14天:Flask使用SQLAlchemy

    flask-sqlalchemy使用详解 之前我们用到的SQLAchemy是可以单独使用的,不需要用到Flask 如果我们在Flask框架中使用SQLAchemy,可以使用flask_sqlalche ...

  3. 【AC自动机】【动态规划】poj3691 DNA repair

    http://blog.csdn.net/kk303/article/details/6929641 http://blog.csdn.net/human_ck/article/details/657 ...

  4. 8.5(java学习笔记)8.5 字节码操作(javassist)

    一.javassist javassist让我们操作字节码更加简单,它是一个类库,允许我们修改字节码.它允许java程序动态的创建.修改类. javassist提供了两个层次的API,基于源码级别的和 ...

  5. HTTP Basic 验证客户端 C#实现笔记

    HTTP Basic 验证客户端的原理:把HTTP头重的ContentType设置为:application/x-www-form-urlencoded如果HTTP头没有Authorization,那 ...

  6. 【摘】请问make -j8 和make -j4 是什么意思?什么作用?

    看到别人写的Shell脚本中有 make -j8 等字眼,Google了一下,网友说是: make linux kernel/rootfs时候多线程执行.

  7. 简单抓取安居客房产数据,并保存到Oracle数据库

    思路和上一篇差不多,先获取网站html文件,使用BeautifulSoup进行解析,将对应属性取出,逐一处理,最后把整理出的记录保存到oracle中,持久化储存. '''Created on 2017 ...

  8. Centos7下ZABBIX安装全记录

    安装之前务必关闭SELINUX Install Repository with MySQL database : rpm -i https://repo.zabbix.com/zabbix/3.4/r ...

  9. Oracle Process Cloud流程云实践

    本篇适合对Oracle Unified BPM有一定基础的人参考,本篇也是参考Oracle A-team  John Featherly的文章进行的实践. 1.      流程创建 打开cloud.o ...

  10. 全面了解linux服务器

    一.查看linux服务器CPU详细情况 判断linux服务器CPU情况的依据如下 具有相同core id的CPU是同一个core的超线程 具有相同physical id的CPU是同一个CPU封装的线程 ...