本文实例为大家分享了vue实现表单录入的具体代码，供大家参考，具体内容如下
最终效果：
代码：
<template>
<div id="app">
<!--第一部分-->
<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>{{p.phone}}</td>
<td>
<button @click="deleteStudentMsg(index)">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</template><script>
export default {
name: "todolist2",
data(){
return{
persons: [
{name: '张三', age: 20, sex: '男', phone: '18932323232'},
{name: '李四', age: 30, sex: '男', phone: '18921212122'},
{name: '王五', age: 20, sex: '男', phone: '18932223232'},
{name: '赵六', age: 25, sex: '女', phone: '18932322232'},
],
newStudent: {name: '', age: 0, sex: '男', phone: ''}
}
},
methods: {
// 创建一条新纪录
createNewStudent(){
// 姓名不能为空
if(this.newStudent.name === ''){
alert('姓名不能为空');
return;
}
// 年龄不能小于0
if(this.newStudent.age <= 0){
alert('请输入正确的年龄');
return;
}
// 手机号码
if(this.newStudent.phone === ''){
alert('手机号码不正确');
return;
