效果如下：
代碼如下：
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>