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 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">

<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>

//使用封装的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>

vue组件挂载和缓存案例

猜你喜欢