<!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>性别: <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>
