vue2.* 事件结合双向数据绑定、模块化以及封装Storage实现todolist 待办事项 已经完成 和进行中持久化 06

ceshi.vue

<template>
  <div id="app">
    <input type='text' v-model='todo' @keydown="doAdd($event)" />
    <button @click="doAdd($event)">+增加</button>
    <br>
    <hr>
    <br>
    <h2>进行中</h2>
    <ul>
        <li v-for="(item,key) in list" v-if="!item.checked">
            <input type="checkbox" @change="saveList()" v-model="item.checked">{{item.title}} --- <button @click="removeData(key)">删除</button>
        </li>
    </ul>
    <br>
    <br>
    <h2>已完成</h2>
    <ul class="finish">
        <li v-for="(item,key) in list" v-if="item.checked">
            <input type="checkbox" @change="saveList()" v-model="item.checked">{{item.title}} --- <button @click="removeData(key)">删除</button>
        </li>
    </ul>

    <br>
    <br>
    <button @click="getList()">获取list的值</button>

  </div>
</template>

<script>
import storage from './model/storage.js';
console.log(storage);
export default {
  data () {/*业务逻辑里面定义的数据*/
    return {
        todo:'',
        list:[]
    }
  },
  methods:{/*方法*/
    doAdd(e){

        if(e.keyCode!==undefined){
            if(e.keyCode==13){
                //1、获取文本框输入的值2、把文本框的值push到list里面
                this.list.push({
                    title:this.todo,
                    checked:false
                });
                this.todo = ''
            }

            //localStorage.setItem('key',JSON.stringify(this.list))
            storage.set('list',this.list)

        }else{
            //1、获取文本框输入的值2、把文本框的值push到list里面
            this.list.push({
                title:this.todo,
                checked:false
            });
            this.todo = '';
            //localStorage.setItem('key',JSON.stringify(this.list))
            storage.set('list',this.list)
        }

        return false;

    },
    removeData(key){
        /*
          splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
          arrayObject.splice(index,howmany,item1,.....,itemX)
          参数                描述
          index                必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
          howmany            必需。要删除的项目数量。如果设置为 0，则不会删除项目。
          item1, ..., itemX    可选。向数组添加的新项目。
        */
        this.list.splice(key,1);
        //localStorage.setItem('list',JSON.stringify(this.list))
        storage.set('list',this.list)
    },
    getList(){
        console.log(this.list)
    },
    saveList(){
        //localStorage.setItem('list',JSON.stringify(this.list))
        storage.set('list',this.list)
    }
  },
  mounted(){/* 生命周期函数 vue页面刷新就会触发的方法 */
    //var list = JSON.parse(localStorage.getItem('list'));
    var list = storage.get('list')
    //判断是否存在
    if(list){
        this.list = list;
    }

  }
}
</script>

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

model/storage.js

//封装操作local storage本地存储的方法  模块化的文件

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;