结合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>