本文主要是介绍案例--vue_todolist，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
封装--localStorage本地化存储[持久化]
封装--localStorage本地化存储[持久化]_tby_pr的博客-CSDN博客
js
const store = new Store;
const key = ['todolist', 'donelist']
//初始化数据
store.set(key[0], [])
store.set(key[1], [])const vm = new Vue({el: '#root',data: {//用户输入的内容cnt: '',//全选按钮all: false,//两个列表todolist: store.get(key[0]) || [],donelist: store.get(key[1]) || [],//两个列表的显示todo: true,done: false,//关键词keyword: ['admin', '小明', '小刚']},methods: {//切换显示toggle() {this.todo = true;this.done = false},toggle1() {this.todo = false;this.done = true},//批量添加按钮 add_all() {this.todolist = store.get(key[0])this.donelist = store.get(key[1])//加入之前判断一下是否有数据if (this.todolist.length) {this.todolist.forEach(item => this.donelist.push(item))store.set(key[1], this.donelist)this.todolist = []store.set(key[0], this.todolist)} else {alert('请先添加数据！')}},// 添加submit(ev) {//输入的内容不呢个超过10个，不能少于2个if (this.cnt.length < 2 || this.cnt.length >= 10) return alert('输入内容不能超过10个不能少于2个!!!')// 敏感词不可以提交!!!!!!!!!!!!!!!!!!!!!!!!const req = this.keyword.some(item => {return this.cnt.indexOf(item) !== -1})if (req) {alert('输入内容包含关键词,请重新输入!')} else {this.todolist = store.get(key[0])this.todolist.push({ id: Date.now(), name: this.cnt })store.set(key[0], this.todolist)this.cnt = ''}},// 删除按钮del(ev) {this.todolist = this.todolist.filter((item) => {return item.id !== ev.target.id - 0})store.set(key[0], this.todolist)this.donelist = this.donelist.filter((item) => {return item.id !== ev.target.id - 0})store.set(key[1], this.donelist)},//todolist 里面的已完成按钮finish(ev) {const arr = this.todolist.filter((item) => {return item.id === ev.target.id - 0})console.log(arr);this.todolist = this.todolist.filter((item) => {return item.id !== ev.target.id - 0})store.set(key[0], this.todolist)this.donelist = store.get(key[1])this.donelist.push(arr[0])store.set(key[1], this.donelist)},//donelist 里面的未完成按钮unfinish(ev) {const arr = this.donelist.filter((item) => {return item.id === ev.target.id - 0})this.donelist = this.donelist.filter((item) => {return item.id !== ev.target.id - 0})store.set(key[1], this.donelist)this.todolist = store.get(key[0])this.todolist.push(arr[0])store.set(key[0], this.todolist)}},
})html
<div id="root"><ul><li @click="toggle()">todo</li><li @click="toggle1()">done</li></ul><ol v-show="todo"><!-- 输入框 --><input type="text" v-model.trim="cnt" @keyup.enter="submit" placeholder="请输入内容"><input type="checkbox" v-model="all" class="all">全选<button v-show='all' @click="add_all">批量添加已完成</button><li v-for="(item,key,index) in todolist"><input type="checkbox" v-model="all" :id="item.id">{{item.name}}<button :id="item.id" @click="del">删除</button><button :id="item.id" @click="finish">已完成</button></li></ol><ol v-show="done" style="margin-top: 60px;"><li v-for="(item,key,index) in donelist"><input type="checkbox">{{item.name}}<button :id="item.id" @click="del">删除</button><button :id="item.id" @click="unfinish">未完成</button></li></ol>
</div>css
* {margin: 0;padding: 0;
}
ul,ol,li {list-style: none;
}
#root {width: 400px;min-height: 300px;border: 1px solid #333;margin: 100px auto;
}
ul>li {float: left;width: 199px;text-align: center;height: 40px;font-size: 24px;border-bottom: 1px solid #333;border-right: 1px solid #333;
}
ol {width: 100%;min-height: 258px;margin-top: 20px;
}
input[type="text"] {width: 90%;height: 30px;margin: 20px;padding-left: 14px;
}
.all {margin-left: 20px;
}
ol>li {min-width: 90%;height: 40px;padding-left: 20px;
}这篇关于案例--vue_todolist的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
