版权声明:转发博客 请注明出处 否则必究 https://blog.csdn.net/lucky541788/article/details/82726197
css
#enjoy{
margin: 50px auto;
width: 600px;
}
fieldset{
border: 1px solid orange;
}
fieldset input{
width: 200px;
height: 30px;
margin: 10px 0;
}
table{
width: 600px;
border: 1px solid orangered;
text-align: center;
margin-top: 20px;
}
thead{
background-color: #ff0000;
}
html
<div id="enjoy">
<!--第一部分-->
<fieldset>
<legend>学生录用系统</legend>
<div>
<span>姓名</span>
<input type="text" placeholder="name" v-model="newPerson.name">
</div>
<div>
<span>年龄</span>
<input type="number" placeholder="age" v-model="newPerson.age">
</div>
<div>
<span>性别</span>
<select v-model="newPerson.sex">
<option value="man">man</option>
<option value="woman">woman</option>
</select>
</div>
<div>
<span>num</span>
<input type="number" placeholder="num" v-model="newPerson.num">
</div>
<button @click="createPerson()">创建新用户</button>
</fieldset>
<!--第二部分-->
<table>
<thead>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>num</td>
<td>删除</td>
</tr>
</thead>
<tbody>
<tr v-for="(p,index) in person">
<td>{{p.name}}</td>
<td>{{p.age}}</td>
<td>{{p.sex}}</td>
<td>{{p.num}}</td>
<td>
<button @click="deletePerson(index)">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
js
{
new Vue({
el: '#enjoy',
data: {
person: [
{name: 'bob1', age: 10, sex: 'man1', num: 3331},
{name: 'bob2', age: 20, sex: 'man2', num: 3332},
{name: 'bob3', age: 20, sex: 'man3', num: 3333},
{name: 'bob4', age: 30, sex: 'man4', num: 3334}
],
newPerson: {name: '', age: '', sex: 'man', num: ''}
},
methods:{
createPerson(){
//姓名不能为空
if(this.newPerson.name===''){
alert('姓名不能为空');
return;
}
//姓名不能为空
if(this.newPerson.age<=0){
alert('输入正确年龄');
return;
}
//姓名不能为空
if(this.newPerson.num===''){
alert('num不能为空');
return;
}
//往数组添加一条新记录
this.person.unshift(this.newPerson);
//清空数据
this.newPerson={name: '', age: 0, sex: '', num: ''};
},
deletePerson(index){
this.person.splice(index,1);
}
}
})
}