學習完vue指令作的一個學生信息錄入系統

時間 2019-11-26

標籤學習 vue 指令一個學生信息錄入系統简体版

原文原文鏈接

一.demo實現原理javascript

輸入完我的信息後點擊建立用戶數據就會顯示在下面的表格中用到了vue中的數據雙向綁定 v-model v-for 還要js正則數組的unshift splice 等方法效果以下圖css

二完整代碼以下需引入一下vue.jshtml

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue/vue.js"></script>
		<style>
			/* 簡單寫了一下css樣式 */
			#app{width:600px;margin:50px auto;}
			fieldset{border:1px solid orange;width:600px;margin-bottom:30px;}
			input{width:200px;height:20px;margin-bottom:20px;}
			table{width:600px;border:1px solid orange;}
			thead{background-color:orangered;}
		</style>
		
	</head>
	<body>
		<div id="app">
			<!-- 第一部分 -->
			<fieldset id="">
				<legend>學院學生信息錄入系統</legend>
				<div>
					<span>姓名</span>
					<!-- v-model是爲了實現數據雙向綁定 -->
					<input type="text" placeholder="請輸入姓名" v-model="newuser.name">
				</div>
				<div>
					<span>年齡</span>
					<input type="text" placeholder="請輸入年齡" v-model="newuser.age">
				</div>
				<div>
					<span>性別</span>
					<select name="" id="" style="margin:0px 0px 20px 0px;" v-model="newuser.sex">
						<option value ="男">男</option>
						<option value ="女">女</option>
					</select>
				</div>
				<div>
					<span>手機</span>
					<input type="text" placeholder="請輸入手機" v-model="newuser.tel">
				</div>
				<button @click="add()">建立新用戶</button>
			</fieldset>
			<!-- 第二部分 -->
			<table>
				<thead>
					<tr>
						<td>姓名</td>
						<td>性別</td>
						<td>年齡</td>
						<td>手機</td>
						<td>刪除</td>
					</tr>
				</thead>
				<tbody>
					<!-- v-for 遍歷數組 -->
					<tr v-for="(p,index) in user">
						<td>{{p.name}}</td>
						<td>{{p.sex}}</td>
						<td>{{p.age}}</td>
						<td>{{p.tel}}</td>
						<td><button @click="del(index)">刪除</button></td>
					</tr>
				</tbody>
			</table>
		</div>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
					//本身模擬的一個數據
					user:[{name:'張三',sex:'男',age:'20',tel:'1832838'},{name:'李四',sex:'女',age:'22',tel:'15988'}],
					//頁面上的數據更新在這個對象裏面  由於加了v-model 
					newuser:{name:'',sex:'男',age:'',tel:''}
				},
				methods:{
					add(){
						// 這是一些簡單的判斷
						if(this.newuser.name===''){
							alert('名字不能爲空');
							//還原一下newuser對象 以便於下一次輸入 如下都是
							this.newuser={name:'',sex:'男',age:'',tel:''};
							return;
						}
						if(this.newuser.age<='0'){
							alert('年齡要大於0');
							this.newuser={name:'',sex:'男',age:'',tel:''};
							return;
						}
						//正則簡單驗證下 要輸入正確的手機號
						if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.newuser.tel))){
							alert('請輸入正確的手機號');
							this.newuser={name:'',sex:'男',age:'',tel:''};
							return;
						}
						// 將newuser放進數組的頭部 放進去v-for好遍歷出來
						this.user.unshift(this.newuser);
						//添加完了之後 要還原一下newuser對象 以便於下一次輸入
						this.newuser={name:'',sex:'男',age:'',tel:''};
					},
					del(index){
						// splice刪除點擊的那一條數據  index是v-for遍歷出來的索引 
						this.user.splice(index,1);
						
					}
				}
			})
		</script>
	</body>
</html>