Vue小案例—todo list

<template>
  <div id="app">
      <h1 v-text = "title"></h1>
      <input v-model = "newItem" v-on:keyup.enter = "addNew"/>
      <ol>
          <li v-for="item in items" v-bind:class="{finished:item.
              isFinished}" v-on:click ="toggleFinished(item)">
              {{item.label}}
          </li>
      </ol>
  </div>
</template>

<script>
//设置store存储信息
import Store from './store'
export default {
 data:function () {
    return {
      title: 'this is todo list',
      //获得每次输入的信息
      items:Store.fetch(),
      /*{
          label:'coding',
          isFinished:true
      },{
          label:'walking',
          isFinished:true
      }*/
      
      liClass:'thisIsLiClass',
      newItem:"",
    }
  },
 watch:{
     items:{
         handler:function(items) {
             //把输入的值存入到localStorage
             Store.save(items);
         },
         deep:true
     }
 },
 methods:{
         toggleFinished:function (item) {
             item.isFinished = !item.isFinished;
         },
         addNew:function () {
             this.items.push({
                 label:this.newItem,
                 isFinished:false
             })
             this.newItem = "";
         }
 }
}
</script>

<style>
.finished{
    text-decoration: line-through;
}
#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;
}
</style>