http://todolist.cn/
App.vue
<template><div><div>大家好，我叫技术高超</div><div>大家好，我叫{{name}}</div><input type="text" v-model="name"><hr><input type="text" v-model="todo" @keyup="keyupClick($event)"><button @click="addData()">添加</button><h2>正在进行中</h2><ul><li v-for="(item,index) in list" :key="index" v-if="!item.checked"><input type="checkbox" v-model="item.checked" @change="changeList()">{{item.title}}<button @click="deleteData(key)">删除</button></li></ul><h2>已经完成</h2><ul class="finished"><li v-for="(item,key) of list" :key="key" v-if="item.checked"><input type="checkbox" v-model="item.checked" @change="changeList()">{{item.title}}<button @click="deleteData(key)">删除</button></li></ul></div>
</template><script>
import storage from "./model/storage.js";
export default {data() {return {name: "技术高超",todo: "",list: []};},methods: {addData() {this.list.push({title: this.todo,checked: false});storage.set("list", this.list);this.todo = "";},deleteData(key) {this.list.splice(key, 1);storage.set("list", this.list);},keyupClick(e) {if (e.keyCode == 13) {this.addData();}},changeList() {storage.set("list", this.list);}},mounted() {let result = storage.get("list");if (result) {this.list = result;}}
};
</script><style lang="scss">
.finished {li {background: #eee;}
}
</style> Storage.js
//封装操作localstorage 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;
