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 相关文章推荐
jquery中ajax学习笔记3
Oct 16 Javascript
js 程序执行与顺序实现详解
May 13 Javascript
使用js的replace()方法查找字符示例代码
Oct 28 Javascript
jquery实现显示已选用户
Jul 21 Javascript
jQuery实现异步获取json数据的2种方式
Aug 29 Javascript
分享Javascript实用方法二
Dec 13 Javascript
基于Bootstrap实现图片轮播效果
May 22 Javascript
js移动端事件基础及常用事件库详解
Aug 15 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
Nov 27 Javascript
JS多个异步请求 按顺序执行next实现解析
Sep 16 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 Javascript
Vue如何清空对象
Mar 03 Vue.js
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 实现判断用户是否手机访问
2015/01/21 PHP
php中JSON的使用方法
2015/04/30 PHP
php表单处理操作
2017/11/16 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
js小数运算出现多位小数如何解决
2015/10/08 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
prototype.js常用函数详解
2016/06/18 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
2016/07/26 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
jquery pagination分页插件使用详解(后台struts2)
2017/01/22 Javascript
js仿拉勾网首页穿墙广告效果
2017/03/08 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
mongoose中利用populate处理嵌套的方法
2017/05/26 Javascript
jQuery操作DOM_动力节点Java学院整理
2017/07/04 jQuery
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
2019/10/25 Javascript
vue计算属性无法监听到数组内部变化的解决方案
2019/11/06 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
深入理解Django的自定义过滤器
2017/10/17 Python
在python3中实现更新界面
2020/02/21 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
简历的个人自我评价范文
2014/01/03 职场文书
干部对照检查材料范文
2014/08/26 职场文书
旅游活动总结
2014/08/27 职场文书
自主招生学校推荐信
2014/09/26 职场文书
2014年村支部书记四风对照检查材料思想汇报
2014/10/02 职场文书
银行授权委托书格式
2014/10/10 职场文书
2014年行政工作总结
2014/11/19 职场文书
2015年乡镇妇联工作总结
2015/05/19 职场文书
Netty分布式客户端处理接入事件handle源码解析
2022/03/25 Java/Android
解决Mysql报错 Table 'mysql.user' doesn't exist
2022/05/06 MySQL