vue实现表单录入小案例

本文实例为大家分享了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;
  }

// 往数组中添加一条新纪录
  this.persons.unshift(this.newStudent);
  // 清空数据
  this.newStudent = {name: '', age: 0, sex: '男', phone: ''}
 },

// 删除一条学生纪录
 deleteStudentMsg(index){
  this.persons.splice(index,1);
 }
 },
}
</script>

<style scoped>
#app{
margin: 50px auto;
width: 600px;
}

fieldset{
border: 1px solid orangered;
margin-bottom: 20px;
}

fieldset input{
width: 200px;
height: 30px;
margin: 10px 0;
}

table{
width: 600px;
border: 2px solid orangered;
text-align: center;
}

thead{
background-color: orangered;
}
</style>

来源：https://blog.csdn.net/weixin_38404899/article/details/87934786