1. 程式人生 > >vue--練習(登入demo)

vue--練習(登入demo)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue</title>
	<script src='jquery.min.js'></script>
	<link rel="stylesheet" href="bootstrap.min.css">
	<script src='vue.min.js'></script>
</head>
<body>
	<!-- 模板 將Vue的變數解除安裝{{}}中-->
	<div id='box'>
		<form action=''>
		  <div class="form-group">
		    <label for="exampleInputEmail1">姓名</label>
		    <input type="text" class="form-control" v-model='name'>
		  </div>
		  <div class="form-group">
		    <label for="exampleInputPassword1">年齡</label>
		    <input type="text" class="form-control" v-model='age'>
		  </div>
		</form>
		<button class="btn btn-success" @click='submit'>確定</button>
		 <button class="btn btn-primary" @click='sort'>按年齡排序</button>
		<table class='table table-bordered table-striped table-hover' style='text-align:center;'>
			<tr>
				<th>序號</th>
				<th>姓名</th>
				<th>年齡</th>
				<th>選項</th>
			</tr>
			<tr v-for='(item,i) in people'>
				<!-- 序號最好用下標值,可以隨著我們的刪除而自動更新 -->
				<td>{{i+1}}</td>
				<td>{{item.name}}</td>
				<td>{{item.age}}</td>
				<td>
					<button class="btn btn-danger btn-sm" @click='del(i)'>刪除</button>
				</td>
			</tr>
			<tr v-show='people.length===0?true:false'>
				<td colspan="4">請輸入資料</td>
			</tr>	
		</table>
	</div>
	<script>
		new Vue({
			el:'#box',
			data:{
				name:'',
				age:'',
				people:[]
			},
			methods:{
				submit(){
					this.people.push({
						name:this.name,
						age:this.age
					});
				},
				del(i){
					if(window.confirm('確認要刪除嗎?')){
						this.people.splice(i,1);
					}else{
						return;
					}
				},
				sort(){
					let len = this.people.length;
					for(var i=0;i<len;i++){
						for(var j=0;j<len-i-1;j++){
							if(Number(this.people[j]['age'])>Number(this.people[j+1]['age'])){
								// 注意:在這裡用普通的元素交換時雖然people陣列改變但是並不會重新渲染,故要用Vue.set()方法來強制渲染
								let temp = this.people[j];
								Vue.set(this.people,j,this.people[j+1]);
								Vue.set(this.people,j+1,temp);
							}
						}
					}
				}
			}
		});
	</script>
</body>

</html>