<template> <div > <!-- 实现回车键事情@keydown="doAdd($event)" --> <input type="text" v-model='todo' @keydown="doAdd($event)" /> <hr> <br> <h2>进行中</h2> <!-- @change="saveList()"点击文本框时发生改变机制事情 --> <ul> <li v-for="(item,key) in list" v-if="!item.checked"> <input type="checkbox" v-model="item.checked" @change="saveList()" /> {{item.title}} -- <button @click="removeData(key)">删除</button> </li> </ul> <br> <h2>已完成</h2> <ul> <li v-for="(item,key) in list" v-if="item.checked"> <input type="checkbox" v-model="item.checked" @change="saveList()" /> {{item.title}} -- <button @click="removeData(key)">删除</button> </li> </ul> <br> </div> </template> <script> import storage from './model/storage.js'; console.log(storage); export default { data () { /*业务逻辑里面定义的数据*/ return { todo:'', list:[], } }, methods:{ // 新增 doAdd(e){ // connect.log(e); //新增时直接按回车键盘显示 键位==keyCode==13 if(e.keyCode==13){ this.list.push({ title:this.todo, checked:false, }) } // 调用 组件显示 storage storage.set('list',this.list); //缓存 // localStorage.setItem('list',JSON.stringify(this.list)) }, //删除 removeData(key){ this.list.splice(key,1) //缓存 storage.set('list',this.list); // localStorage.setItem('list',JSON.stringify(this.list)) }, // 每次点击文本框checkbox改变时，从新保存一下 saveList(){ // localStorage.setItem('list', JSON.stringify(this.list)) storage.set('list',this.list); }, }, //生命周期函数,vue页面刷新就会触发的方法(和 bata methods 同级) mounted(){ // var list=JSON.parse(localStorage.getItem('list')); //调用组件使用 var list=storage.get('list'); //判断是否存在 if(list){ this.list=list; } } } </script> <style scoped > </style>
封装操作
//封装操作，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); } } //把storage 暴露出去 export default storage;
显示
