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

最新推荐文章于 2024-04-30 20:35:11 发布

夏木炎

最新推荐文章于 2024-04-30 20:35:11 发布

阅读量3.5k

点赞数 9

分类专栏： Vue学习笔记文章标签： vue 学生录入系统

本文链接：https://blog.csdn.net/xm393392625/article/details/80996483

版权

Vue学习笔记专栏收录该内容

8 篇文章 1 订阅

订阅专栏

一.案例代码

<!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>

二.结果

夏木炎

关注

9
点赞
踩
39

收藏

觉得还不错? 一键收藏
0
评论
vue学生录入系统小案例（实现添加删除）

一.案例代码&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;vue指令综合案例&lt;/title&gt; &lt;style&gt; #app{ margin: 50px auto; width: 620px;
复制链接

扫一扫