效果如下：
代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="vue.js"></script> 7 </head> 8 <style> 9 /* 3.设置样式*/ 10 img{width: 100%} 11 #app{ 12 margin: 50px auto; 13 width: 600px; 14 } 15 fieldset{ 16 margin-bottom: 30px; 17 width: 375px; 18 height: 255px; 19 position: absolute; 20 top: 210px; 21 left: 765px; 22 border: none; 23 } 24 legend{ 25 margin-left: 52px; 26 font-size: 18px; 27 font-weight: bold; 28 } 29 fieldset input{ 30 width: 250px; 31 height: 30px; 32 margin: 10px 0; 33 border-radius: 15px; 34 padding-left: 25px; 35 outline: none; 36 border: 1px solid rosybrown; 37 } 38 .btn{ 39 display: inline-block; 40 width: 123px; 41 height: 34px; 42 float: left; 43 margin-left: 123px; 44 border-radius: 15px; 45 outline: none; 46 } 47 table{ 48 width: 600px; 49 text-align: center; 50 position: absolute; 51 top: 510px; 52 left: 660px; 53 } 54 thead{ 55 background-color: #7d7d7d; 56 } 57 </style> 58 <body> 59 <!-- 60 功能是基于vue的常用指令实现 61 v-on 62 v-model 63 --> 64 <div id="app"> 65 <!-- 1.页面搭建--> 66 <img src="02.jpg" alt=""> 67 <!--录入信息页--> 68 <fieldset> 69 <legend>栋梁幼儿园一班学生信息录入系统</legend> 70 <div> 71 <span>姓名：</span> 72 <input type="text" placeholder="请输入学生姓名" v-model="newStudent.name"> <!-- 6.使用v-model实现双向绑定,绑定之后就可以有效值创建，但是此时输入框中的数据不会自动清空--> 73 </div> 74 <div> 75 <span>年龄：</span> 76 <input type="text" placeholder="请输入学生年龄" v-model="newStudent.age"> 77 </div> 78 79 <div> 80 <span>手机：</span> 81 <input type="text" placeholder="请输入家长手机" v-model="newStudent.phone"> 82 </div> 83 <div> 84 <span>性别</span> 85 <select name="" id="" v-model="newStudent.sex"> 86 <option value="男">男</option> 87 <option value="女">女</option> 88 </select> 89 </div> 90 <!-- 4.2 调用创建新用户的方法--> 91 <button @click="createNewStudent()" class="btn">点击录入学生信息</button> 92 </fieldset> 93 <!--学生信息详情展示栏--> 94 <table> 95 <thead> 96 <tr> 97 <td>学生姓名</td> 98 <td>学生年龄</td> 99 <td>学生性别</td> 100 <td>家长手机</td> 101 <td>删除</td> 102 </tr> 103 </thead> 104 <tbody> 105 <tr v-for="(p,index) in persons"> 106 <td>{{p.name}}</td> 107 <td>{{p.age}}</td> 108 <td>{{p.sex}}</td> 109 <td>{{p.phone}}</td> 110 <td> 111 <button @click="deleteStudentMsg(index)">删除</button> <!--10. 调用删除数据的方法 index:索引--> 112 </td> 113 </tr> 114 115 </tbody> 116 </table> 117 </div> 118 </body> 119 <script> 120 var vm = new Vue({ 121 el:'#app', 122 data:{ 123 //2.创建数据 124 persons:[ 125 {name:"西门吹雪", age:"4", sex:"男", phone:"15078950533"}, 126 {name:"常德帥", age:"6", sex:"男", phone:"15878950533"}, 127 {name:"尤幼倩", age:"7", sex:"男", phone:"15078950533"}, 128 {name:"董得多", age:"5", sex:"男", phone:"15078950533"} 129 ], 130 // 5 创建一条空的新对象 131 newStudent:{name:'', age:'0', sex:'男', phone:''} 132 }, 133 //4.实现创建新用户的逻辑代码 134 //逻辑：创建一个对象，存放到建立好的数组中，然后添加到展示栏即可 135 //先要获取到创建新用户的点击按钮进行监听 136 methods:{ 137 // 4.1 创建一条新记录 138 createNewStudent(){ 139 // 8 验证输入框姓名，实现不能为空创建 140 if(this.newStudent.name === ''){ 141 alert('学生姓名不能为空哦'); 142 return; //一旦姓名为空，不再执行创建用户的操作 143 } 144 145 // 8.1 验证输入框年龄不能小于0，实现不能为空创建 146 if(this.newStudent.age <= 0){ 147 alert('请输入正确的年龄'); 148 return; 149 } 150 151 // 8.1 验证输入框手机号码不能为空，实现不能为空创建 152 if(this.newStudent.phone === ''){ //应该通过正则验证手机号码的格式，这里只是验证不能为空 153 alert('请输入正确的手机号码'); 154 return; 155 } 156 157 //4.2拿到前面的数组，把新建的对象放进去， 158 // 4.2并且产生的时候应该是排列在数组的最前面,使用数组的.persons.unshift()方法实现这个功能 159 // 4.2往数组中创建一条新内容 160 this.persons.unshift(this.newStudent);//4.2此时不管输入框是否存在有效值，点击button按钮都会不停是创建新用户 161 //4.2所以要设置如果没有值的时候不能继续插入新的值 162 163 //7.1清空数据，实现创建新用户之后把输入框的内容清空，但是此时依然可以创建空的数据 164 this.newStudent = {name:'', age:1, sex:'', phone:''} 165 }, 166 167 //9.点击删除按钮的时候删除一条学生信息记录 168 //实现原理：获取到数组，从数组中删除， 169 //想要从数组中删除一条数据需要一条索引 170 deleteStudentMsg(index){ 171 this.persons.splice(index,1); 172 } 173 }, 174 }); 175 </script> 176 </html>