創(chuàng)新互聯(lián)www.cdcxhl.cn八線動(dòng)態(tài)BGP香港云服務(wù)器提供商,新人活動(dòng)買多久送多久,劃算不套路!
十余年專注成都網(wǎng)站制作,企業(yè)網(wǎng)站設(shè)計(jì),個(gè)人網(wǎng)站制作服務(wù),為大家分享網(wǎng)站制作知識(shí)、方案,網(wǎng)站設(shè)計(jì)流程、步驟,成功服務(wù)上千家企業(yè)。為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì)及定制高端網(wǎng)站建設(shè)服務(wù),專注于企業(yè)網(wǎng)站設(shè)計(jì),高端網(wǎng)頁(yè)制作,對(duì)成都航空箱等多個(gè)方面,擁有豐富的網(wǎng)站制作經(jīng)驗(yàn)。如何使用vue實(shí)現(xiàn)員工信息錄入功能?很多新手對(duì)此不是很清楚,為了幫助大家解決這個(gè)難題,下面小編將為大家詳細(xì)講解,有這方面需求的人可以來(lái)學(xué)習(xí)下,希望你能有所收獲。
Vue通用信息錄入界面,供大家參考,具體內(nèi)容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>員工信息錄入</title> <style> .btn1{ color: blue; background: skyblue; text-align: center; } </style> </head> <body> <p id="p2"> <fieldset> <legend>員工信息錄入</legend> <p > <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>手機(jī):</label> <input type="text" v-model="newStudent.phoneNo"><br> <p> <button @click="createStudent()">新增用戶</button> </p> </p> <table border="2px"> <thead> <tr> <th>序號(hào)</th> <th>姓名</th> <th>年齡</th> <th>性別</th> <th>手機(jī)</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>總行數(shù):</label><span>{{studentsList.length}}</span> </fieldset> </p> </body> <script src="js/vue.js"></script> <script> var p1Data={ newStudent:{name:"",age:0,sex:"男",phoneNo:""}, studentsList:[{No:"0001",name:"張三",age:18,sex:"男",phoneNo:"13688899900"}, {No:"0112",name:"王五",age:28,sex:"男",phoneNo:"18800068888"}, {No:"0253",name:"林志玲",age:33,sex:"女",phoneNo:"18600001002"}, {No:"0608",name:"林志穎",age:68,sex:"男",phoneNo:"15998769900"}], }; var vm1=new Vue({ el:"#p2", data:p1Data, methods:{ //移除一行 DeletestudentRow:function (index) { this.studentsList.splice(index,1); }, //添加一行 createStudent: function(){ this.studentsList.push(this.newStudent); // 添加完newPerson對(duì)象后,重置newPerson對(duì)象 this.newStudent = {name:"",age:0,sex:"男",phoneNo:""} }, } }); </script> </html>
看完上述內(nèi)容是否對(duì)您有幫助呢?如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章,請(qǐng)關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司行業(yè)資訊頻道,感謝您對(duì)創(chuàng)新互聯(lián)的支持。
當(dāng)前題目:如何使用vue實(shí)現(xiàn)員工信息錄入功能-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)網(wǎng)址:http://muchs.cn/article16/dgicdg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App設(shè)計(jì)、網(wǎng)站改版、建站公司、服務(wù)器托管、手機(jī)網(wǎng)站建設(shè)、ChatGPT
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容