To Do List完成代办事项:
<template>
<div id="app">
<div class="text-left title">
<span>To Do List</span>
<input @keydown="addList" class="userin" type="text" placeholder="请输入...">
</div>
<div>
<p class="h6 un_thing">未完成事项:</p>
<ul>
<li v-if="!item.ishow" v-for="(item,index) in lists" :key="index">
<input @click="changeShow(index)" type="checkbox" :checked="item.ishow">
{{item.title}}--------------<button @click="deletelist(index)">删除</button>
</li>
</ul>
<p class="h6 un_thing">已完成事项:</p>
<ul>
<li v-if="item.ishow" v-for="(item,index) in lists" :key="index">
<input @click="changeShow(index)" type="checkbox" :checked="item.ishow">
{{item.title}}--------------<button @click="deletelist(index)">删除</button>
</li>
</ul>
</div>
</div>
</template>
<script>
// 导入使用的模块
import Storage from './Public/Storage.js';
export default{
name:"app",
data(){
return{
lists:[
{
title:"JavaScript录制",
ishow:false
},
{
title:"Vue录制",
ishow:true
}
]
}
},
mounted(){
this.lists=Storage.getStorage("todo");
},
methods:{
addList(e){
if(e.keyCode===13){
let ele=e.target.value;
if(ele.length!=0){
this.lists.push({
title:ele,
ishow:false
});
e.target.value="";
Storage.saveStorage("todo",this.lists);
}
}
},
changeShow(key){
this.lists[key].ishow=!this.lists[key].ishow;
Storage.saveStorage("todo",this.lists);
},
deletelist(index){
this.lists.splice(index,1);
Storage.saveStorage("todo",this.lists);
}
}
}
</script>
<style>
#app{
width: 500px;
min-height: 300px;
border: 1px solid black;
margin: 0 auto;
}
.title{
line-height: 30px;
background-color: black;
color: white;
padding-left: 15px;
}
.userin{
position: relative;
top: -2px;
left: 40px;
width: 200px;
outline: none;
border-radius: 5px;
border-style: none;
padding-left: 10px;
font-size: 13px;
}
.un_thing{
padding-left: 10px;
}
</style>
封装一个缓存的模块:
在src中新建一个名为Public的文件,在这个文件下新建一个名为Storage.js的文件夹,在该文件夹里写入封装的模块代码
let storage={
//保存缓存
saveStorage(key,value){
localStorage.setItem(key,JSON.stringify(value));
},
//读取缓存
getStorage(key){
return JSON.parse(localStorage.getItem(key));
},
// 清除缓存
clearStorage(key){
localStorage.clearItem(key);
}
}
//将其暴露出去,别的地方用则导文件即可
export default storage;
在APP.vue中需导入使用的模块:
import Storage from './Public/Storage.js';
使用时:
Storage.方法名称(传值)
Storage.saveStorage("todo",this.lists);