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>