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(){
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>