Vue實現一個學生資訊錄入系統，實現錄入和刪除
阿新 • • 發佈：2018-11-23
效果如下：
程式碼如下：
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{ 25margin-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>