Vue.js实现ToDoList

//localStorage.js
// 封装操作localstorage本地存储的方法,实现保存历史记录
var storage = {
    set(key,value){
        localStorage.setItem(key,JSON.stringify(value));
    },
    get(key){
        return JSON.parse(localStorage.getItem(key))
    },
    remove(key){
        localStorage.removeItem(key)
    }
}

export default storage;

<template>
  <div id="app">
    <input type="text" v-model="todo">
    <button @click="addList()">添加button>
    <hr>
    <h3>进行中：h3>
    <ul class="list">
      <li v-for="(item,key) in list" v-if="!item.checked">
        <input type="checkbox" v-model="item.checked" @change="changeList()">
        {{item.title}}
        <span class="del" @click="delList(key)">×span>
      li>
    ul>
    <h3>已完成：h3>
    <ul class="list">
      <li v-for="(item,key) in list" v-if="item.checked">
        <input type="checkbox" v-model="item.checked" @change="changeList()">
        {{item.title}}
        <span class="del" @click="delList(key)">×span>li>
    ul>
  div>
template>

<script>
import storage from '../model/localStorge.js'
export default {
  name: 'app',
  data () {
    return {
      todo:'',
      list:[]
    }
  },
  methods:{
    addList:function(){
      this.list.push({
        title:this.todo,
        checked:false
      })
      this.todo = '';
      storage.set('list',this.list);
      console.log(this.list)
    },
    delList:function(key){
      this.list.splice(key,1);
     storage.set('list', this.list);
    },
    changeList:function(){
      storage.set('list', this.list);
    }
  },
  mounted(){
    // 生命周期 vue页面刷新就会重新渲染的方法
    var list = storage.get('list');
    if(list){
      this.list = list;
    }
  }
}
script>

<style lang="scss">
.list li{
    background: #eee;
}
.del{
  float:right;
  margin-right: 10px;
}
style>