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>