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>