用Vue实现的学生录入系统

最新推荐文章于 2024-08-04 19:29:42 发布

谵忆南

最新推荐文章于 2024-08-04 19:29:42 发布

阅读量3.2k

点赞数 3

分类专栏：前端文章标签： Vue 前端

本文链接：https://blog.csdn.net/TaiYangb/article/details/90451168

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!--引入cs-->
		<!--引入jQuery-->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>		
		<title>学生信息录入系统</title>
		<style>
			#app{
				/*position: absolute;*/
				margin-left: 350px;
				margin-top: 100px;
				
				
			}
		</style>
	</head>
	<body>
		<div id="app">
			
<fieldset style="width: 600px;" >
			
		<legend>学生信息录入系统</legend>
		
		<div>姓名：<input type="text" placeholder="请写入你的大名" v-model="user.name"/></div>    <!-- v-model  双向绑定数据 -->
		<br />
		<div>年龄：<input type="text" v-model="user.age"/></div>
		<br />
		<div>性别:&nbsp;&nbsp;<select v-model="user.sex">
			
			<option>男</option>

			<option>女</option>
			
		    </select>
		</div>
		<br />
		<div>手机：<input type="text"  placeholder="请输入你的大哥大号码" v-model="user.phoneNumber"/></div>
		<br />
		
		<button type="submit" @click="newUser">创建新用户</button>
	
		
</fieldset>

<br />
  
		<table  style="text-align: center;border: 1px solid red;">
			<tr>
				<th width="100px">姓名</th>
				<th width="100px">性别</th>
				<th width="100px">年龄</th>
				<th width="200px">手机</th>
				<th width="100px">删除</th>
			</tr>
			 <!--遍历得到所有的数据-->
			 
			<tr v-for="item in users">
				<td>{{item.name}}</td>
				<td>{{item.sex}}</td>
				<td>{{item.age}}</td>
				<td>{{item.phoneNumber}}</td>
				
				<td><button @click="del(index)">删除</button></td>
			</tr>
			
		</table>
		
      	</div>
	</body>
	
	<script type="text/javascript">
		
		var app=new Vue({
			el:"#app",
			data:{
				
				user:{
					name:"",
					sex: "",
					age:"",
					phoneNumber:""
					
				},
				users:[
					{name:"张三", sex:"男",age:"18",phoneNumber:"153683585655"},
				]
			},
			methods:{
				//将data中的值添加到数组中
				
				newUser:function(){
					if(this.user.name==""){
						alert("名字错误");	
					}else if(this.user.age==""||this.user.age<0){
						alert("年龄错误");
						
					}else{
						this.users.push({name:this.user.name,sex:this.user.sex,age:this.user.age,phoneNumber:this.user.phoneNumber})	
					}
				},
				del:function(index){
					this.users.splice(index,1);
					
				},
			}
		});
		
		
		
		
		
		
	</script>
</html>

在这里插入图片描述

谵忆南

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
2
评论
用Vue实现的学生录入系统

<!DOCTYPE html><html> <head> <meta charset="UTF-8">   <script src="js/vue.js" type="text/javascript" charset="utf-8"></...
复制链接

扫一扫

专栏目录