<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>Student Entry System</legend>
<div>
Name: <input type=text placeholder="Please enter username " v-model="newperson.name" />
</div>
<div>
Age: <input type=text placeholder="Please enter age" v-model="newperson.year" />
</div>
<div >
Gender: <select v-model="newperson.sex">
<option>male</option>
<option>女</option>
</select>
</div>
<div>
Phone: <input type=text placeholder="Please enter phone number" v-model="newperson.phone" />
</div>
<button v-on:click="mperson">Create new user</button>
< /fieldset>
<table cellspacing="0">
<thead>
<td>name</td>
<td>gender</td>
<td>age</td>
<td>mobile</td>
<td>delete </td>
</thead>
<tr v-for="(p,index) in person">
<td>{{p.name}}</td>
<td>{{p.sex}}</td> 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("name cannot be empty");
if(this.newperson.year==0){
alert("age cannot be empty") ;
}
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>
Description: Simple vue code, not yet involved in the database, the new user created can be displayed in the table below, click the delete button to delete this row
</html>