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>