使用vue.js库完成事件计划表

最新推荐文章于 2024-07-25 14:59:16 发布

longting_

最新推荐文章于 2024-07-25 14:59:16 发布

阅读量585

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/longting_/article/details/80530871

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>todolist</title>
	<style type="text/css">
		.list_con{
			width:600px;
			margin:50px auto 0;
		}
		.inputtxt{
			width:550px;
			height:30px;
			border:1px solid #ccc;
			padding:0px;
			text-indent:10px;			
		}
		.inputbtn{
			width:40px;
			height:32px;
			padding:0px;
			border:1px solid #ccc;
		}
		.list{
			margin:0;
			padding:0;
			list-style:none;
			margin-top:20px;
		}
		.list li{
			height:40px;
			line-height:40px;
			border-bottom:1px solid #ccc;
		}

		.list li span{
			float:left;
		}

		.list li a{
			float:right;
			text-decoration:none;
			margin:0 10px;
		}
	</style>
	<script type="text/javascript" src="js/vue.js"></script>
	
</head>
<body>

	<div class="list_con">
	<h2>To do list</h2>
		<input type="text" name="" id="txt1" class="inputtxt" v-model="add_list">
		<input type="button" name="" value="增加" id="btn1" class="inputbtn" @click="fnAdd">
		
		<ul id="list" class="list">
			<li v-for="(item,index) in study_list" >
				<span>{{item}}</span>
				<a href="javascript:;" class="up" @click="fnUp(index)"> ↑ </a>
				<a href="javascript:;" class="down" @click="fnDown(index)"> ↓ </a>
				<a href="javascript:;" class="del" @click="fnDel(index)">删除</a>
			</li>
		
		</ul>

	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el:'.list_con',
			data:{
				add_list:'',
				study_list:['学习HTML','学习CSS','学习JavaScript'],
				// num:0
				
				},
			methods:{
				fnAdd:function(){
					//判断输入框是否有内容
					if (this.add_list==''){
						alert('请输入内容');
						return;
					}
					this.study_list.push(this.add_list)
					this.add_list=''
					
				},
				
				fnDel:function(index){
					this.study_list.splice(index,1)
					// alert(index)
				},
				fnUp:function(index){
					// index= index-1;
					// alert(this.study_list[index])
					// [this.study_list[index-1],this.study_list[index]]=[this.study_list[index],this.study_list[index-1]]
					if (index==0){
						alert('到顶了');
						return;
					}
					this.study_list.splice((index-1),2,this.study_list[index],this.study_list[index-1])
				},
				fnDown:function(index){
					if(index==this.study_list.length-1){
						// alert(index)
						
						alert('到底了');
						return;
					}
					this.study_list.splice(index,2,this.study_list[index+1],this.study_list[index]);

						// [1,2,3,4]
				}
			}
		})
		// [1,2,3,4]

	</script>	
</body>
</html>