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 相关文章推荐
div移动 输入框不能输入的问题
Nov 19 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
Jan 12 Javascript
js判断undefined变量类型使用typeof
Jun 03 Javascript
动态的创建一个元素createElement及删除一个元素
Jan 24 Javascript
JavaScript操作URL的相关内容集锦
Oct 29 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
Nov 16 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 Javascript
angular实现商品筛选功能
Feb 01 Javascript
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 Javascript
webpack dll打包重复问题优化的解决
Oct 10 Javascript
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
使用vue实现各类弹出框组件
Jul 03 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的相似度计算函数:levenshtein的使用介绍
2013/04/15 PHP
php获取远程图片体积大小的实例
2013/11/12 PHP
提高php编程效率技巧
2015/08/13 PHP
Javascript typeof 用法
2008/12/28 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
JavaScript结合HTML DOM实现联动菜单
2017/04/05 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
浅谈React深度编程之受控组件与非受控组件
2017/12/26 Javascript
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
node中使用es6/7/8(支持性与性能)
2019/03/28 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
用于统计项目中代码总行数的Python脚本分享
2015/04/21 Python
Python3爬虫之urllib携带cookie爬取网页的方法
2018/12/28 Python
利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法
2019/01/08 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
python日志模块logbook使用方法
2019/09/19 Python
pygame库实现俄罗斯方块小游戏
2019/10/29 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
总结python 三种常见的内存泄漏场景
2020/11/20 Python
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
Made in Design意大利:现代家具、名家灯具和装饰
2020/10/27 全球购物
自考自我鉴定范文
2013/10/30 职场文书
社区安全检查制度
2014/02/03 职场文书
公司授权委托书范文
2014/08/02 职场文书
质量负责人岗位职责
2015/02/15 职场文书
2016庆祝国庆67周年宣传语
2015/11/25 职场文书
创业计划书之少年玩具店
2019/09/05 职场文书
解决Pytorch中关于model.eval的问题
2021/05/22 Python
OpenCV-Python实现人脸磨皮算法
2021/06/07 Python
CSS中float高度塌陷问题的四种解决方案
2022/04/18 HTML / CSS