<html>
<head>
<meta charset="UTF-8"/>
<title>vue.js</title>
<script src="vue.min.js"></script>
<style>
input{
margin-top:20px;
}
#app{
margin-left:100px;
}
fieldset{
width:500px;
}
table {
width:530px;
}
table td{
border-collapse:collapse;
text-align: center;
}
thead td{
background: orange;
}
</style>
</head>
<body>
<div id="app">
<fieldset>
<legend>学生录入系统</legend>
<div>
姓名：<input type=text placeholder="请输入用户名" v-model="newperson.name" />
</div>
<div>
年龄：<input type=text placeholder="请输入年龄" v-model="newperson.year" />
</div>
<div>
性别：<select v-model="newperson.sex">
<option>男</option>
<option>女</option>
</select>
</div>
<div>
手机：<input type=text placeholder="请输入手机号" v-model="newperson.phone" />
</div>
<button v-on:click="mperson">创建新用户</button>
</fieldset>
<table cellspacing="0">
<thead>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>手机</td>
<td>删除</td>
</thead>
<tr v-for="(p,index) in person">
<td>{{p.name}}</td>
<td>{{p.sex}}</td>
<td>{{p.year}}</td>
<td>{{p.phone}}</td>
<td><button v-on:click="delperson(index)">删除</button></td>
</tr>
</table>
</div>
<script>
new Vue({
el:"#app",
data:{
person:[
{name:"张三",year:18,sex:"男",phone:121892324},
{name:"张三",year:18,sex:"男",phone:121892324},
{name:"张三",year:18,sex:"男",phone:121892324},
{name:"张三",year:18,sex:"男",phone:121892324}
],
newperson:{name:'',year:0,sex:"男",phone:""},
},
methods:{
mperson:function(){
if(this.newperson.name==""){
alert("名字不能为空");
if(this.newperson.year==0){
alert("年龄不能为空");
}
if(this.newperson.phone==""){
alert("电话不能为空");
}
}
else{this.person.unshift(this.newperson);
this.newperson={name:'',year:0,sex:"男",phone:""};
}
},
delperson:function(index){
this.person.splice(index,1);
}
}
})
</script>
</body>
说明：简单的vue代码，还没有涉及到数据库，创建的新用户可以在下面的表格中显示，点击删除按钮可以删除本行
</html>
