用Vue实现的学生录入系统

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

谵忆南

3301人浏览 · 2019-05-22 20:10:14

谵忆南 · 2019-05-22 20:10:14 发布

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

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^