modle.js
<tem
const 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
plate>
<div class="tofo">
<h1>todoList 列表</h1>
<hr />
<input type="text" v-model="todoValue" @keyup.enter="keyUp" />
<hr />
<div>
<h1>未完成</h1>
<ul>
<template v-for="(item, index) in list" :key="index">
<li v-if="!item.checked">
<input type="checkbox" name="" id="" v-model="item.checked" @change="changeItem"/>
{{ item.value }}---<button @click="delItem(index)">删除</button>
</li>
</template>
</ul>
<h1>已经完成</h1>
<ul>
<template v-for="(item, index) in list" :key="index">
<li v-if="item.checked">
<input type="checkbox" name="" id="" v-model="item.checked" @change="changeItem"/>
{{ item.value }}---<button @click="delItem(index)">删除</button>
</li>
</template>
</ul>
</div>
</div>
</template>
<script>
import storage from '../model/model.js'
export default {
data() {
return {
list: [],
todoValue: ""
};
},
methods: {
// 添加
keyUp() {
if (this.todoValue) {
this.list.push({
value: this.todoValue,
checked: false
});
this.todoValue = "";
storage.set('todolist', this.list)
// localStorage.setItem('todolist', JSON.stringify(this.list))
}
},
// @click="delItem(index)"
delItem(index) {
this.list.splice(index, 1);
storage.set('todolist', this.list)
// localStorage.setItem('todolist', JSON.stringify(this.list))
},
changeItem () {
storage.set('todolist', this.list)
// localStorage.setItem('todolist', JSON.stringify(this.list))
}
},
mounted() {
let statr = storage.get('todolist')
// let statr = JSON.parse(localStorage.getItem('todolist'))
if (statr) {
this.list = statr
}
},
};
</script>
<style lang='scss' scoped>
.tofo {
width: 500px;
height: 300px;
border: 1px solid #333333;
position: absolute;
left: 900px;
top: 0;
h1 {
text-align: center;
}
input {
margin-left: 100px;
}
}
</style>