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中的$(document).ready()与window.onload的区别
Nov 18 Javascript
js 变量类型转换常用函数与代码[比较全]
Dec 01 Javascript
javascript 语法基础 想学习js的朋友可以看看
Dec 16 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
jQuery focus和blur事件的应用详解
Jan 26 Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
May 19 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
关于JavaScript的单双引号嵌套问题
Aug 20 Javascript
微信小程序获取手机号授权用户登录功能
Nov 09 Javascript
JS中的BOM应用
Feb 02 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 采集程序原理分析篇
2010/03/05 PHP
mysql下创建字段并设置主键的php代码
2010/05/16 PHP
PHP中将字符串转化为整数(int) intval() printf() 性能测试
2020/03/20 PHP
ext监听事件方法[初级篇]
2008/04/27 Javascript
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
分享一个自己写的table表格排序js插件(高效简洁)
2011/10/29 Javascript
使用javascript实现简单的选项卡切换
2015/01/09 Javascript
Javascript基础教程之数组 array
2015/01/18 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
Javascript动画的实现原理浅析
2015/03/02 Javascript
jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法
2015/03/24 Javascript
AngularJS国际化详解及示例代码
2016/08/18 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
JS实现移动端实时监听输入框变化的实例代码
2017/04/12 Javascript
js插件实现图片滑动验证码
2020/09/29 Javascript
JS数组求和的常用方法实例小结
2019/01/07 Javascript
layui表格内放置图片,并点击放大的实例
2019/09/10 Javascript
vue 组件开发原理与实现方法详解
2019/11/29 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
ES2020 已定稿,真实场景案例分析
2020/05/25 Javascript
js实现3D旋转效果
2020/08/18 Javascript
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
Python时间戳与时间字符串互相转换实例代码
2013/11/28 Python
python自定义异常实例详解
2017/07/11 Python
Python文件操作之合并文本文件内容示例代码
2017/09/19 Python
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
美国开幕式潮店:Opening Ceremony
2018/02/10 全球购物
加利福尼亚州威尼斯的女性奢侈品设计师服装和概念店:Mona Moore
2018/09/13 全球购物
struct与class的区别
2014/02/03 面试题
行政部岗位职责范本
2014/03/13 职场文书
指导教师评语
2014/04/26 职场文书
工商企业管理应届生求职信
2014/05/04 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
慰问信(范文3篇)
2019/10/23 职场文书
欧元符号 €
2022/02/17 杂记