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 相关文章推荐
JS解析json数据并将json字符串转化为数组的实现方法
Dec 25 Javascript
js控制文本框输入的字符类型方法汇总
Jun 19 Javascript
Javascript实现的Map集合工具类完整实例
Jul 31 Javascript
js实现商城星星评分的效果
Dec 29 Javascript
Html5+jQuery+CSS制作相册小记录
Dec 30 Javascript
详解在vue-cli项目中安装node-sass
Jun 21 Javascript
如何制作一个Node命令行图像识别工具
Dec 12 Javascript
说说Vue.js中的functional函数化组件的使用
Feb 12 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 Javascript
layui-select动态选中值的例子
Sep 23 Javascript
JS实现4位随机验证码
Oct 19 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
Nov 06 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
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
Yii实现显示静态页的方法
2016/04/25 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
php伪静态验证码不显示的解决方案
2019/09/26 PHP
共享自己写一个框架DreamScript
2007/01/20 Javascript
JS 面向对象之神奇的prototype
2011/02/26 Javascript
基于SVG的web页面图形绘制API介绍及编程演示
2013/06/28 Javascript
浅谈javascript六种数据类型以及特殊注意点
2013/12/20 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
jquery取消选择select下拉框示例代码
2014/02/22 Javascript
JavaScript中读取和保存文件实例
2014/05/08 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
BootStrap实现鼠标悬停下拉列表功能
2017/02/17 Javascript
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
小程序scroll-view组件实现滚动的示例代码
2018/09/20 Javascript
vue结合element-ui使用示例
2019/01/24 Javascript
Vue函数式组件的应用实例详解
2019/08/30 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
Python实现发送email的几种常用方法
2014/08/18 Python
详解Python中__str__和__repr__方法的区别
2015/04/17 Python
简单了解python中的与或非运算
2019/09/18 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
Python with语句用法原理详解
2020/07/03 Python
linux面试相关问题
2013/04/28 面试题
求职信范文英文版
2014/01/05 职场文书
元旦晚会邀请函
2014/01/27 职场文书
广告学专业自荐信范文
2014/02/24 职场文书
员工年终考核评语
2014/12/31 职场文书
张思德观后感
2015/06/09 职场文书
《跨越海峡的生命桥》教学反思
2016/02/18 职场文书
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js