<template>

<div id="app">

<h1 v-text="title"></h1>

<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="toggleFinished(item)">

{{item.label}}

</li>

</ul>

</div>

</template>

<script>

import Store from'./store.js'

export default {

data:function(){

return{

title:'shuiguo title',

items:Store.fetch(),

newItem:''

}

},

watch:{

items:{

handler:function(items){

Store.save()

},

deep:true

}

},

methods:{

toggleFinished:function (item){

item.isFinished=!item.isFinished

},

addNew:function(){

this.items.push(

{

label:this.newItem,

isFinished:true

}),

this.newItem=''

}

}

}

</script>

<style>

#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;

}

.finished{

color:red;

}

</style>

下面是store.js

const STORAGE_KEY="todos-vuejs"

export default{

fetch:function(){

return JSON.parse(

window.localStorage.getItem(

STORAGE_KEY||"[]"

)

)

},

save:function(items){

window.localStorage.setItem(

STORAGE_KEY,JSON.stringify(items)

)

}

}