vue学生录入系统小案例（实现添加删除）

一.案例代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>vue指令综合案例</title>
		<style>
			#app{
				margin: 50px auto;
				width: 620px;
			}
			fieldset{
				border: 2px solid plum;
				margin-bottom: 20px;
			}
			fieldset input{
				width: 200px;
				height: 30px;
				margin: 10px 0;
			}
			table{
				width: 620px;
				border: 2px solid plum;
				text-align: center;
			}
			thead{
				background-color: plum;
			}
			
		</style>
	</head>
	<body>
		<div id="app">
			<fieldset>
				<legend>学生录入系统</legend>
				<div>
					<span>姓名：</span>
					<input type="text" placeholder="请输入姓名" v-model="student.name"/>
					<span></span>
				</div>
				<div>
					<span>年龄：</span>
					<input type="text" placeholder="请输入年龄" v-model="student.age"/>
				</div>
				<div>
					<span>性别：</span>
					<select v-model="student.sex">
						<option value="男">男</option>
						<option value="女">女</option>
					</select>
				</div>
				<div>
					<span>QQ：</span>
					<input type="text" placeholder="请输入QQ" v-model="student.QQ"/>
				</div>
				<button @click="createNewStudent()">创建新用户</button>
			</fieldset>
			<table>
				<thead>
					<tr>
						<td>姓名</td>
						<td>年龄</td>
						<td>性别</td>
						<td>QQ</td>
						<td>删除</td>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(p,index) in persons">
						<td>{{p.name}}</td>
						<td>{{p.age}}</td>
						<td>{{p.sex}}</td>
						<td>{{p.QQ}}</td>
						<td><button @click="deleteStudentMsg(index)">删除</button></td>
					</tr>
				</tbody>
			</table>
		</div>
		<script type="text/javascript" src="js/jquery.js" ></script>
		<script type="text/javascript" src="js/vue.js" ></script>
		<script>
			//1.创建Vue的实例
			let vm=new Vue({
				el:'#app',
				data:{
					persons:[
					   {name:'张三',age:16,sex:'男',QQ:'123456'},
					   {name:'李四',age:17,sex:'男',QQ:'100000'},
					   {name:'王麻子',age:18,sex:'女',QQ:'666666'},
					   {name:'赵六',age:19,sex:'男',QQ:'888888'},
					   {name:'刘七',age:20,sex:'女',QQ:'999999'}
					],
					student:{name:'',age:0,sex:'男',QQ:''}
				},
				methods:{
					//创建一条新记录
					createNewStudent(){
						//姓名不能为空
						if(this.student.name==''){
							alert('姓名不能为空');
							return;
						}
						//年龄不能小于0
						if(this.student.age<0){
							alert('请输入正确年龄');
							return;
						}
						//QQ
						if(this.student.age==''){
							alert('请输入正确年龄');
							return;
						}
						//往数组中添加一条新记录
						this.persons.unshift(this.student);
						//清空数据
						this.student={name:'',age:0,sex:'男',QQ:''};
					},
					//删除
					deleteStudentMsg(index){
						this.persons.splice(index,1);
					}
				}
			});
		</script>
	</body>
</html>
二.结果
vue学生录入系统小案例（实现添加删除）

猜你喜欢
