<fieldset>
<legend>学生信息录入系统</legend>
<div>
<span>姓名:</span>
<input type="text" placeholder="请输入姓名" v-model="newStudent.name">
</div>
<div>
<span>年龄:</span>
<input type="text" placeholder="请输入年龄" v-model="newStudent.age">
</div>
<div>
<span>性别:</span>
<select v-model="newStudent.sex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<div>
<span>手机:</span>
<input type="text" placeholder="请输入手机号码" v-model="newStudent.phone">
</div>
<button @click="createNewStudent()">创建新用户</button>
</fieldset>
<table>
<thead>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>手机</td>
<td>删除</td>
</tr>
</thead>
<tbody>
<tr v-for="(p,index) in persons">
<td>{{p.name}}</td>
<td>{{p.sex}}</td>
<td>{{p.age}}</td>
<td>
<button @click="deleteStudentMsg(index)">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
persons:[
{name:'张三',age:20,sex:'男',},
{name:'李四',age:20,sex:'男',},
{name:'王五',age:20,sex:'男',},
{name:'赵六',age:20,sex:'女',},
],
newStudent : {name:'',age:0,sex:'男',phone:''}
},
methods: {
//创建一条新纪录
createNewStudent(){
if(this.newStudent.name ==='') {
alert('姓名不能为空');
return;
}
if(this.newStudent.age <= 0) {
alert('请输入正确的年龄');
return;
}
if(this.newStudent.phone ==='') {
alert('手机号码不正确');s
return;
}
//往数组中添加一条新纪录
this.persons.unshift(this.newStudent);
//清空记录
this.newStudent = {name:'',age:0,sex:'男',phone:''}
},
//删除一条学生记录
deleteStudentMsg(index) {
this.persons.splice(index,1);
}
}
});
</script>
学生信息录入系统的插入,删除
最新推荐文章于 2022-11-14 19:53:23 发布