vue.js todolist实现代码

const STORAGE_KEY = 'todos-vue.js'export default{ fetch(){  return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]') }, save(items){  window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items)); }}

<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='toogleFinish(item)'>  {{item.label}}  </li> </ul> </div></template><script>import Store from './store'export default { name: 'app', data () { return {  title: 'this is a todo list',  items:Store.fetch(),  newItem:'' } }, watch:{  items:{  handler(items){  //经过变化的数组会作为第一个参数传入   Store.save(items)   console.log(Store.fetch());  },  deep:true  //深度复制  } }, methods:{ toogleFinish(item){  item.isFinished = !item.isFinished }, addNew(){  this.items.push({  label:this.newItem,  isFinished:false,  })  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{ text-decoration: underline;}</style>