代码：
<template> <div> <!--第一部分--> <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>