vue組件掛載和緩存案例

主要講了一個小案例，待辦清單和已完成清單的項目。項目難點涉及到一個過濾篩選，以及補充了一個緩存知識點。
<template>
<div id="app">
<div class="title">
<span>ToDo List</span>
<div class="title-ipt">
<label>添加事項：</label>
<input type="text" placeholder="輸入事項..." v-model="usertext" @keypress="userKeyDown" />
<button @click="addData">添加</button>
</div>
</div>
<!--下面的事項 -->
<div class="content">
<ul>
<li class="li-name">未完成事項：</li>
<li class="li-info">
<!-- 這裏會產生一個空的div 解決方案是 使用vue裏面的過濾器 -->
<!-- 這裏在加載的時候 只渲染false -->
<div v-for="(item,index) in selectData(false)" :key="index">
<div v-if="!item.isfinish">
<input type="checkbox" @click="changeStatus(index)" :checked="item.isfinish" />
<span>{{item.name}}</span>
<a href="javascript:void(0)" @click="removeData(index)">---------移除</a>
</div>
</div>
</li>
<li class="li-name">已完成事項：</li>
<li class="li-info">
<!-- 這裏在加載的時候 只渲染true-->
<div v-for="(item,index) in selectData(true)" :key="index">
<div v-if="item.isfinish">
<input type="checkbox" @click="changeStatus(index)" :checked="item.isfinish" />
<span>{{item.name}}</span>
<a href="javascript:void(0)" @click="removeData(index)">---------移除</a>
</div>
</div>
</li>
</ul>
</div>
</div>
</template>

<script>
// 使用storage html5緩存 緩存數據 刷新數據還在
//如何做js代碼模塊封裝
//storage 模塊的封裝

//使用封裝的storage模塊
import Storage from "./storage/Storage.js";
export default {
name: "app",
data() {
return {
usertext: "",
list: null
};
},
mounted() {
// 組件掛載完成之後去執行這個方法
//讀取寫入的緩存
this.list = Storage.getStorage("msg");
if (!this.list) {
this.list = [];
}
},
methods: {
addData() {
if (!this.usertext.length) {
alert("請輸入事項...");
return;
}
// 事件調用的方法
console.log(this.usertext);
//構建一個json對象
let json = {
name: this.usertext,
isfinish: false
};
this.list.push(json);
this.usertext = "";
//寫入緩存
Storage.setStorage("msg", JSON.stringify(this.list));
},
changeStatus(index) {
console.log(index);
//修改索引對應的狀態
this.list[index].isfinish = !this.list[index].isfinish;
//寫入緩存
Storage.setStorage("msg", JSON.stringify(this.list));
},
removeData(index) {
// 根據傳遞的索引移除數據
this.list.splice(index, 1);
//寫入緩存
Storage.setStorage("msg", JSON.stringify(this.list));
},
userKeyDown(e) {
let code = e.which || e.charCode;
if (code === 13) {
this.addData(); //這個是調用上面添加的方法
}
},
selectData(istrue) {
//給v-for 定義的自定義過濾器
// 做過濾數據的方法
//進行數據的過濾 in 遍歷的對象
//該方法得返回一個對象上
if (!this.list) {
return [];
}
return this.list.filter((val, index) => {
return val.isfinish === istrue;
});
}
}
};
</script>
<style>
#app {
margin: auto;
width: 1000px;
height: auto;
padding: 0.5rem 1rem;
}
.title {
font-size: 1.5rem;
padding: 1rem 0;
}
.title > span {
margin: 0 3rem;
font-size: 3rem;
vertical-align: middle;
}
.title-ipt {
display: inline-block;
vertical-align: middle;
font-size: 1rem;
}
.title-ipt > input {
width: 300px;
outline: none;
border-radius: 5px;
border: 1px solid #c0c0c0;
height: 30px;
line-height: 30px;
padding-left: 10px;
box-sizing: border-box;
}
.title-ipt > button {
width: 100px;
height: 30px;
outline: none;
}
.content {
width: 800px;
height: auto;
border: 1px solid #000;
box-sizing: border-box;
padding: 1rem 3rem;
}
.li-name {
font-weight: 600;
font-size: 1rem;
}
.li-info {
font-size: 1rem;
margin: 0.6rem 0;
list-style: none;
}
.li-info > div {
margin: 0.5rem 0;
}
.li-info input {
position: relative;
top: 3px;
}
.li-info a {
display: inline-block;
float: right;
}
</style>