<template>
<div id="app">
<h1>{{title}}</h1>
//v-model 双向绑定
<input 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'
export defalut {
data: function() {
return {
title: 'this is a todo list',
newItem: '',
items: Store.fetch()
}
},
methods: {
'toggleFinish': function(item) {
item.isFinished = !item.isFinished
},
'addNew':function() {
this.items.push({
label: this.newItem,
isFinished: false})
this.newItem = '';
}
},
//请注意此处监听的是items
watch: {
items: {
handler: function(val, oldVal) {
Store.save(val)
},
//深度检索,为true时,当数组中的某个key值发生变化时也会被检索到
deep: true
}
}
}
</script>
<style></style>
//store.js
const STORAGE_KEY = 'todos-vuejs'
export defalut {
fetch() {
return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')
},
save(items) {
window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items))
}
}
vue-todoList
猜你喜欢
转载自blog.csdn.net/qq_40352733/article/details/79547254
今日推荐
周排行