vue实现员工信息录入功能的方法

前端  /  管理员 发布于 6年前   242

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> <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>手机：</label>  <input type="text" v-model="newStudent.phoneNo"><br>  <p>  <button @click="createStudent()">新增用户</button>  </p>  </p>  <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> </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对象后，重置newPerson对象  this.newStudent = {name:"",age:0,sex:"男",phoneNo:""}  }, } });</script></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

相关学习推荐：javascript视频教程

以上就是vue实现员工信息录入功能的方法的详细内容，更多请关注其它相关文章！


  • 上一条：
    代码详解Vue中key的作用示例
    下一条：
    12个vue高频原理面试题（附分析）

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客