VUE小案例——奇妙清单（vue指令综合应用）

最新推荐文章于 2021-11-04 00:30:09 发布

与世无争乔扬

最新推荐文章于 2021-11-04 00:30:09 发布

阅读量408

点赞数 1

分类专栏：前端文章标签： Vue 前端 vue指令 html

本文链接：https://blog.csdn.net/weixin_45603043/article/details/102766874

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

需求：

运用Vue常用指令编写程序实现美妙清单功能：
列表展示、项目添加、项目删除、项目筛选、项目编辑

涉及到的指令有： v-on v-show v-model v-text v-for

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/lib/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
		<h1>奇妙清单：</h1>
			<span><button @click="state='all'" type="button">所有 {{ taskLisk.length }}</button></span>
			<span><button @click="state='done'" type="button">已经完成 {{ doneList.length }}</button></span>
			<span><button @click="state='undo'" type="button">未完成 {{ taskLisk.length-doneList.length }}</button></span>
			
		<h2>添加任务(按enter键进行添加哦)</h2>
		<!-- 键盘点击事件 enter键确定添加 -->
		<input type="text"@keyup.enter="addTask" v-model="newTaskName">
		
		<h2>任务列表：</h2>
		<div v-for="(item,index) in currentList">
			<span v-show="editingTask==item">
				<input type="text" 
				 v-autofocus="flag"
				 @blur="cancel"
				 @keyup.esc="cancel"
				 @keyup.enter="confirm(index)"
				 v-model="editingName"
				 />
			</span>
			
			<span v-show="editingTask != item">
				<!-- 多选框 -->
				<input type="checkbox" v-model="item.done"/>
				<!-- 双击编辑功能 -->
				<span @dblclick="editTask(index)">{{item.name}}</span>
				<!-- 删除任务按钮 -->
				<button type="button"@click="delTask(index)" >&times;</button>
			</span>
			
		</div>
		
		</div>
		
		<script type="text/javascript">
			const vm= new Vue({
				el:"#app",
				data:{
					newTaskName:"",
					state:"all",
					flag:true,
					editingName:"",
					editingTask:null,
					taskLisk:[
						{
							name:" Learn Chinese",
							done:true
						},
						{
							name:" Learn AMaths",
							done:true
						},
						{
							name:" Learn English",
							done:true
						},
						{
							name:" Learn French",
							done:false
						}
					]
				},
				methods:{
					addTask(){
						if(this.newTaskName.length<=0){
							alert("添加内容不能为空哦")
						}
						else{
							this.taskLisk.push({
								name:this.newTaskName,
								done:false
							});
							// 添加完成后清空输入框
							this.newTaskName="";
						}
					},
					delTask(index){
						this.taskLisk.splice(index,1);
					},
					editTask(index){
						this.editingTask=this.currentList[index];
						this.editingName=this.currentList[index].name
					},
					cancel(){
						this.editingTask=null;
					},
					confirm(index){
						if(this.editingName.length<=0)
						{
							alert("The content cannot be empty！")
						}
						else
						{
							// 删除原有的任务,添加新的任务
							this.taskLisk.splice(index,1,{name:this.editingName,done:false})
						}
					}
				},
				
				// 计算属性
				computed:{
					doneList(){
						return this.taskLisk.filter((task)=>{
							return task.done;
						})
					},
					currentList(){
						if(this.state=="all"){
							return this.taskLisk
						}
						else if(this.state=="done"){
							return this.doneList;
						}
						else
						{
							return this.taskLisk.filter( (task)=>{
								return !task.done;
							});
						}
					}
				},
				
				// 编辑框聚焦失焦事件
				directives:{
					autofocus:{
						inserted:function(element,data){
							if(data.value){
								element.focus();
							}
							else
							{
								element.blur();
							}
						},
						update:function(element,data){
							if(data.value){
								element.focus();
							}
							else
							{
								element.blur();
							}
						}
					}
				}
			})
		</script>
		
		
		
	</body>
</html>