console
new Vue({
el:"#app",
data:{
persons:[
{name:"张三",age:"20",sex:"女",phone:"15293519046"},
{name:"李四",age:"25",sex:"男",phone:"15592519366"},
{name:"王五", age:"30",sex:"女",phone:"15893516546"}
],
newperson:{name:"",age:"",sex:"女",phone:""}
},
methods:{
add(str){
if(this.newperson.name===""){
alert("用户名不能为空");
return;
}
if(this.newperson.age <=0||this.newperson.age>=150){
alert("请输入正确年龄");
return;
}
if(this.newperson.phone===""||this.newperson.phone.length<1){
alert("电话号码格式不正确");
return;
}
this.persons.unshift(this.newperson);
this.newperson={name:"",age:"",sex:"女",phone:""}
},
delet(index){
this.persons.splice(index,1)
}
}
});
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.12/vue.min.js"></script>
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
<form>
<label for="name">姓名：</label>
<input type="text" id="name" placeholder="请输入姓名" v-model="newperson.name"><br>
<label for="age">年龄：</label>
<input type="text" id="age" placeholder="请输入年龄" v-model="newperson.age"><br>
<label for="sex">性别：</label>
<select id="sex" style="width:50px" v-model="newperson.sex">
<option>男</option>
<option selected>女</option>
</select>
<br>
<label for="phone">电话：</label>
<input type="text" id="phone" placeholder="请输入电话" v-model="newperson.phone"><br>
<input type="button" class="point" v-on:click="add()" value="添加">
</form>
<table class="table table-bordered table-striped center">
<tr style="color:red;width:20px">
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>电话</td>
<td>删除</td>
</tr>
<tr v-for="(person,index) in persons">
<td>{{person.name}}</td>
<td>{{person.age}}</td>
<td>{{person.sex}}</td>
<td>{{person.phone}}</td>
<td>
<button id="delete" class="btn-warning point" v-on:click="delet(index)">
删除
</button>
</td>
</tr>
</table>
</div>
</body>
</html>
body{ background:pink}
form{ width:400px;border:2px solid red; padding:10px 50px; margin:10px auto}
.point{cursor:pointer}
.center{text-align:center}
#delete:hover{background:red;}