vue 结合localStorage 来双向绑定数据
结合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 来双向绑定数据的更多相关文章
- vue双向绑定(数据劫持+发布者-订阅者模式)
参考文献:https://www.cnblogs.com/libin-1/p/6893712.html 实现mvvm主要包含两个方面,数据变化更新视图,视图变化更新数据. 关键点在于data如何更新v ...
- 组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双向绑定数据
组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双 ...
- 手写vue双向绑定数据
来一张原理图: 实现思路: (1)绑定data 种的数据,为每个数据添加指令.通过Object,defineProperty() 来通知属性是否更改 (2) 找到每个DOM节点的指令.绑定事件.并绑定 ...
- 利用设置新数据存储结构解决vue中折叠面板双向绑定index引起的问题
问题背景是,在进行机器性能可视化的前端开发时,使用折叠面板将不同机器的性能图表画到不同的折叠面板上去.而机器的选择利用select下拉选项来筛选. 由于在折叠面板中,通过 如下v-model双向绑定了 ...
- vue 自定义组件 v-model双向绑定、 父子组件同步通信
父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx ...
- Vue - 如何实现一个双向绑定
JS - 如何实现一个类似 vue 的双向绑定 Github JS 实现代码 先来看一张图: 这张图我做个简要的描述: 首先创建一个实例对象,分别触发了 compile 解析指令 和 observe ...
- vue 自定义组件 v-model双向绑定、 父子组件同步通信【转】
父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa" 子组件使用$emit('update:msg', 'msg改变后的值xxx ...
- Vue.js 3.x 双向绑定原理
什么是双向绑定? 废话不多说,我们先来看一个 v-model 基本的示例: <input type="text" v-model="search"> ...
- vue 双向绑定 数据修改但页面没刷新
在数据改动的代码后加 this.$forceUpdate(); 若是在某个特定方法中 则将this改为方法中设定的名称
随机推荐
- 数学结论【p1463】[POI2002][HAOI2007]反素数
Description 对于任何正整数x,其约数的个数记作g(x).例如g(1)=1.g(6)=4. 如果某个正整数x满足:g(x)>g(i) 0<i<x,则称x为反质数.例如,整数 ...
- 14、Flask实战第14天:Flask使用SQLAlchemy
flask-sqlalchemy使用详解 之前我们用到的SQLAchemy是可以单独使用的,不需要用到Flask 如果我们在Flask框架中使用SQLAchemy,可以使用flask_sqlalche ...
- 【AC自动机】【动态规划】poj3691 DNA repair
http://blog.csdn.net/kk303/article/details/6929641 http://blog.csdn.net/human_ck/article/details/657 ...
- 8.5(java学习笔记)8.5 字节码操作(javassist)
一.javassist javassist让我们操作字节码更加简单,它是一个类库,允许我们修改字节码.它允许java程序动态的创建.修改类. javassist提供了两个层次的API,基于源码级别的和 ...
- HTTP Basic 验证客户端 C#实现笔记
HTTP Basic 验证客户端的原理:把HTTP头重的ContentType设置为:application/x-www-form-urlencoded如果HTTP头没有Authorization,那 ...
- 【摘】请问make -j8 和make -j4 是什么意思?什么作用?
看到别人写的Shell脚本中有 make -j8 等字眼,Google了一下,网友说是: make linux kernel/rootfs时候多线程执行.
- 简单抓取安居客房产数据,并保存到Oracle数据库
思路和上一篇差不多,先获取网站html文件,使用BeautifulSoup进行解析,将对应属性取出,逐一处理,最后把整理出的记录保存到oracle中,持久化储存. '''Created on 2017 ...
- Centos7下ZABBIX安装全记录
安装之前务必关闭SELINUX Install Repository with MySQL database : rpm -i https://repo.zabbix.com/zabbix/3.4/r ...
- Oracle Process Cloud流程云实践
本篇适合对Oracle Unified BPM有一定基础的人参考,本篇也是参考Oracle A-team John Featherly的文章进行的实践. 1. 流程创建 打开cloud.o ...
- 全面了解linux服务器
一.查看linux服务器CPU详细情况 判断linux服务器CPU情况的依据如下 具有相同core id的CPU是同一个core的超线程 具有相同physical id的CPU是同一个CPU封装的线程 ...