添加删除列表-CSDN博客

本文链接：https://blog.csdn.net/weixin_45703831/article/details/139629653

<!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 src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>

	<div class="list_con" id="app">
	<h2>To do list</h2>
		<input type="text" name="" id="txt1" class="inputtxt" v-model="txtVal">
		<input type="button" name="" value="增加" @click="add" id="btn1" class="inputbtn">

		<ul id="list" class="list">
			<li v-for="item,index in arr">
				<span>{{ item }}</span>
				<a href="javascript:;" class="del" @click="del(index)">删除</a>
			</li>
		</ul>

	</div>
	<script>
		new Vue({
			el:"#app",
			data:{
				txtVal:"",
				arr:["学习html","学习css","学习javascript"]
			},
			methods:{
				del(i){
					// 删除数组中的对应项
					// this.arr.splice(要操作的索引，要删除的个数，要增加的元素)
					this.arr.splice(i,1)
				},
				add(){
					// 数据验证，验证不过关，就return
					if(!this.txtVal.trim()){
						alert("请输入数据")
						return
					}
					// 是最终要执行的逻辑
					// this.arr.unshift(用户输入的数据)
					this.arr.unshift(this.txtVal);
					this.txtVal = "";
				}
			}
		})
	</script>
</body>
</html>