Vue todolist 版本三本地持久化存储

一创建测试项目

vue init webpack-simple vuedemo

二进入demo目录

cd vuedemo

三安装依赖

cnpm install

四修改代码App.vue

<template>
  <div id="app">
    <input type="text" v-model="todo" @keydown="doAdd($event)"/>
<h2>doing</h2>
 <ul>
  <li v-for="(item,key) in list" :key="item.id" v-if="!item.checked">
   <input type="checkbox"  v-model="item.checked" @change="saveList()"/> {{item.title}}--- <button @click="removeData(key)">Delete</button>
  </li>
  </ul>


  <h2>done</h2>
 <ul class ="finish">
  <li v-for="(item,key) in list" :key="item.id" v-if="item.checked">
  <input type="checkbox" v-model="item.checked" @change="saveList()"/> {{item.title}}--- <button @click="removeData(key)">Delete</button>
  </li>
  </ul>

  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      todo:'',
      list:[
        {
          title:'write book',
          checked:true
        },
        {
          title:'lean cook',
          checked:true
        }
      ]
    };
  },
  methods:{
    doAdd(e){
      if(e.keyCode == 13){//enter
        this.list.push({title:this.todo, checked:false});
        this.todo = ""
      }

      localStorage.setItem('list', JSON.stringify(this.list))
    },
    removeData(key){
      this.list.splice(key, 1)

      localStorage.setItem('list', JSON.stringify(this.list))
    },    
    saveList(){
       localStorage.setItem('list', JSON.stringify(this.list))
       console.log("saveList" + this.list)   
    }
  },
  mounted: function () {//when vue refresh 
    var list = JSON.parse(localStorage.getItem('list'))

    if(list){
      this.list = list;
    }
    console.log("mounted" + list)   
  },


};
</script>

<style>
.finish li{
  background:#eee;
}
</style>