vue實現員工資訊錄入功能
阿新 • • 發佈:2020-06-14
Vue通用資訊錄入介面,供大家參考,具體內容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>員工資訊錄入</title> <style> .btn1{ color: blue; background: skyblue; text-align: center; } </style> </head> <body> <div id="div2"> <fieldset> <legend>員工資訊錄入</legend> <div > <label>姓名:</label> <input type="text" v-model="newStudent.name"><br> <label>年齡:</label> <input type="text" v-model="newStudent.age"><br> <label>性別:</label> <select v-model="newStudent.sex">> <option value="男">男</option> <option value="女">女</option> </select><br> <label>手機:</label> <input type="text" v-model="newStudent.phoneNo"><br> <p> <button @click="createStudent()">新增使用者</button> </p> </div> <table border="2px"> <thead> <tr> <th>序號</th> <th>姓名</th> <th>年齡</th> <th>性別</th> <th>手機</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(student,index) in studentsList"> <td>{{index+1}}</td> <td>{{student.name}}</td> <td>{{student.age}}</td> <td>{{student.sex}}</td> <td>{{student.phoneNo}}</td> <td :class="btn1"><button @click="DeletestudentRow(index)">移除</button></td> </tr> </tbody> </table> <label>總行數:</label><span>{{studentsList.length}}</span> </fieldset> </div> </body> <script src="js/vue.js"></script> <script> var div1Data={ newStudent:{name:"",age:0,sex:"男",phoneNo:""},studentsList:[{No:"0001",name:"張三",age:18,phoneNo:"13688899900"},{No:"0112",name:"王五",age:28,phoneNo:"18800068888"},{No:"0253",name:"林志玲",age:33,sex:"女",phoneNo:"18600001002"},{No:"0608",name:"林志穎",age:68,phoneNo:"15998769900"}],}; var vm1=new Vue({ el:"#div2",data:div1Data,methods:{ //移除一行 DeletestudentRow:function (index) { this.studentsList.splice(index,1); },//新增一行 createStudent: function(){ this.studentsList.push(this.newStudent); // 新增完newPerson物件後,重置newPerson物件 this.newStudent = {name:"",phoneNo:""} },} }); </script> </html>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。