Vue实现简单ToDolist案例

Vue实现简单ToDolist案例

<template> <div> <div> <input type="text" v-model="inputValue" @keydown.enter="add"> <span @click="shaix" style="cursor: pointer;">筛选</span> <h3>正在进行({{noList}})</h3> <div> <div v-for="(item,index) in list" v-show="!item.isSuc"> <input type="checkbox" @click.prevent="handleNo(item)"> <span class="todo-sp1" v-show="updateIndex!=index" @dblclick="update(item,index)"> {{item.title}} </span> <input type="text" v-show="updateIndex==index" v-model="item.title" @keydown.enter="updateSave" @keydown.esc="updateBack(item)" @blur="updateSave"> <button @click="del(index)">删除</button> </div> </div> <h3>已经完成({{yesList}})</h3> <div> <div v-for="(item,index) in list" v-show="item.isSuc"> <input type="checkbox" checked @click.prevent="handleYes(item)"> <span class="todo-sp1" v-show="updateIndex!=index" @dblclick="update(item,index)"> {{item.title}} </span> <input type="text" v-show="updateIndex==index" v-model="item.title" @keydown.enter="updateSave" @keydown.esc="updateBack(item)" @blur="updateSave"> <button @click="del(index)">删除</button> </div> </div> </div> </div> </template> <script> export default{ data(){ return{ inputValue:'', list:[], updateIndex:-1, //要修改的元素下标 backSave:'' //临时保存信息的变量 } }, created() { //初始化保存 let list = localStorage.list if(list){ this.list = JSON.parse(list) } }, computed:{ //计算属性 noList(){ //计算未完成的数量 let num = 0 this.list.map(item=>{ if(!item.isSuc){ num++ } }) return num }, yesList(){ //计算已完成的数量 let num = 0 this.list.map(item=>{ if(item.isSuc){ num++ } }) return num } }, methods:{ add(){ //添加 if(this.inputValue.trim() == ''){ //非空校验 return } this.list.push({ title:this.inputValue, isSuc:false }) this.inputValue = '' //添加后清空输入框 this.save()//保存本地 }, del(index){ //删除 this.list.splice(index,1) this.save()//保存本地 }, handleNo(item){ //点击复选框 内容显示到已经完成列表 item.isSuc = true this.save()//保存本地 }, handleYes(item){ //点击复选框 内容显示到正在进行列表 item.isSuc = false this.save()//保存本地 }, update(item,index){ //双击显示输入框 this.updateIndex = index this.backSave = item.title }, updateSave(){ //enter保存修改的内容 this.updateIndex = -1 this.save()//保存本地 }, updateBack(item){ //按esc还原 this.updateIndex = -1 item.title = this.backSave }, shaix(){ //跳转到筛选页面 this.$router.push({ name:'shaix' }) }, save(){ //保存本地 localStorage.list = JSON.stringify(this.list) } } } </script> <style scoped="scoped"> .todo-sp1{ display: inline-block; width: 200px; cursor: move; } </style>

筛选+搜索：

<template> <div> <select name="" id="" v-model="sel"> <option value="">请选择</option> <option value="all">全部</option> <option value="no">正在进行</option> <option value="yes">已经完成</option> </select> 搜索: <input type="text" v-model="kw" @keydown.enter="search"> <h3>筛选结果:</h3> <div> <div v-for="(item,index) in showlist"> {{item.title}} </div> </div> </div> </template> <script> export default{ data(){ return{ sel:'', list:[], //源数据 showlist:[], //用于展示的数据 kw:'' //搜索关键词 } }, created() { //初始化保存 let list = localStorage.list if(list){ this.list = JSON.parse(list) } }, methods:{ search(){ //搜索 this.showlist = [] this.list.map(item=>{ if(item.title.includes(this.kw)){ this.showlist.push(item) } }) } }, watch:{ //侦听器 sel(newSel){ this.showlist = [] //筛选前先清空 if(newSel == 'all'){ this.showlist = this.list }else if(newSel == 'no'){ this.list.map(item=>{ if(!item.isSuc){ this.showlist.push(item) } }) }else if(newSel == 'yes'){ this.list.map(item=>{ if(item.isSuc){ this.showlist.push(item) } }) } } } } </script> <style> </style>