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 相关文章推荐
Package.js  现代化的JavaScript项目make工具
May 23 Javascript
封装了jQuery的Ajax请求全局配置
Feb 05 Javascript
jquery任意位置浮动固定层插件用法实例
May 29 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 Javascript
js控制TR的显示隐藏
Mar 04 Javascript
JS遍历页面所有对象属性及实现方法
Aug 01 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
详解Vue 非父子组件通信方法(非Vuex)
May 24 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
解决vue处理axios post请求传参的问题
Mar 05 Javascript
JS实现的简单折叠展开动画效果示例
Apr 28 Javascript
Vue的Options用法说明
Aug 14 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&amp;&amp;mysql)一
2006/10/09 PHP
PHP生成静态页
2006/11/25 PHP
php实现用户在线时间统计详解
2011/10/08 PHP
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
解析PHP中的正则表达式以及模式匹配
2013/06/19 PHP
简要剖析PHP的Yii框架的组件化机制的基本知识
2016/03/17 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
js 高效去除数组重复元素示例代码
2013/12/19 Javascript
Js保留小数点的4种效果实现代码分享
2014/04/12 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
JQuery判断正整数整理小结
2017/08/21 jQuery
Nodejs 和 Electron ubuntu下快速安装过程
2018/05/04 NodeJs
vue中使用protobuf的过程记录
2018/10/26 Javascript
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
Vue动态生成el-checkbox点击无法赋值的解决方法
2019/02/21 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
vue中的计算属性和侦听属性
2020/11/06 Javascript
Python性能优化的20条建议
2014/10/25 Python
Python中二维列表如何获取子区域元素的组成
2017/01/19 Python
Python爬取网页中的图片(搜狗图片)详解
2017/03/23 Python
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
python实现dijkstra最短路由算法
2019/01/17 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
python 多进程并行编程 ProcessPoolExecutor的实现
2019/10/11 Python
菲律宾酒店预订网站:Hotels.com菲律宾
2017/07/12 全球购物
什么是"引用"?申明和使用"引用"要注意哪些问题?
2016/03/03 面试题
中式婚礼主持词
2014/03/13 职场文书
工程管理英文求职信
2014/03/18 职场文书
廉洁自律演讲稿
2014/05/22 职场文书
个人授权委托书范文
2014/09/21 职场文书
公司表扬稿范文
2015/05/05 职场文书
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python
Python Flask实现进度条
2022/05/11 Python
win10拖拽文件时崩溃怎么解决?win10文件不能拖拽问题解决方法
2022/08/14 数码科技