vue实现员工信息录入功能


Posted in Javascript onJune 11, 2020

Vue通用信息录入界面,供大家参考,具体内容如下

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,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:"#div2",
 data:div1Data,

 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 相关文章推荐
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 Javascript
jQuery简单获取键盘事件的方法
Jan 22 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
Aug 02 Javascript
javascript 动态脚本添加的简单方法
Oct 11 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
Jul 07 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
Dec 14 Javascript
JavaScript创建对象的四种常用模式实例分析
Jan 11 Javascript
详解vue项目打包步骤
Mar 29 Javascript
layui实现二维码弹窗、并下载到本地的方法
Sep 25 Javascript
vue+iview使用树形控件的具体使用
Nov 02 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
Nov 12 Javascript
JavaScript Event Loop相关原理解析
Jun 10 #Javascript
vue Element左侧无限级菜单实现
Jun 10 #Javascript
详解用js代码触发dom事件的实现方案
Jun 10 #Javascript
Vue中key的作用示例代码详解
Jun 10 #Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
Jun 10 #Javascript
js 获取扫码枪输入数据的方法
Jun 10 #Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
Jun 10 #Javascript
You might like
php zip文件解压类代码
2009/12/02 PHP
PHP读取xml方法介绍
2013/01/12 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
php文件缓存类汇总
2014/11/21 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
PHP预定义接口――Iterator用法示例
2020/06/05 PHP
破除网页鼠标右键被禁用的绝招大全
2006/12/27 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
checkbox选中与未选中判断示例
2014/08/04 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
RequireJS使用注意细节
2016/05/15 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
2017/08/12 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
python正则表达式中的括号匹配问题
2014/12/14 Python
在Python的Django框架中实现Hacker News的一些功能
2015/04/17 Python
pandas 取出表中一列数据所有的值并转换为array类型的方法
2018/04/11 Python
python re模块常见用法例举
2021/03/01 Python
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
天猫精选:上天猫,就够了
2016/09/21 全球购物
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
新闻专业个人求职信
2013/12/19 职场文书
学生会主席就职演讲稿
2014/01/14 职场文书
副董事长岗位职责
2014/04/02 职场文书
应届大专生自荐书
2014/06/16 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
现实表现证明材料
2015/06/19 职场文书
青年文明号创建口号大全
2015/12/25 职场文书
党员读书活动心得体会
2016/01/14 职场文书
动画《新网球王子 U-17 WORLD CUP》希腊队PV公开
2022/04/02 日漫
Java无向树分析 实现最小高度树
2022/04/09 Javascript
i5-10400f处理相当于i7多少水平
2022/04/19 数码科技