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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
vue实现学生信息管理系统
本文实例为大家分享了vue实现学生信息管理系统的具体代码,供大家参考,具体内容如下 界面 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue--学生信息管理系统</title> <!-- 引包 --> <script src="https://cdn.jsdelivr
-
vue实现简单学生信息管理
本文实例为大家分享了vue实现学生信息管理的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学生信息管理</title> <link rel="stylesheet" href="./lib/bootstrap.css&quo
-
vue实现户籍管理系统
本文实例为大家分享了vue实现户籍管理系统的具体代码,供大家参考,具体内容如下 户籍管理系统,v-model,v-for的引用 界面预览 步骤思路: 1.html+css创建 2.引入vue,实例 3.准备默认数据message数组 4.渲染默认数据,v-for循环表单 5.创建一条新数据newmessage 6.绑定到输入框v-model 7.创建一个添加函数add(),把新数据添加到默认数据中,newmessage->message 8.添加完后,清空表单,即恢复newmessage 9.点
-
vue实现信息管理系统
最近学习了vue,自己用bootstrap+vue写了一个信息管理系统,只有前端,没有后台,可以实现基本的增.删.改.查 具体效果在结尾处有附图 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body,html{ margin: 20px 50px; } .title2{ color: bluev
-
VueJS实现用户管理系统
本文实例为大家分享了VueJS实现用户管理系统的具体代码,供大家参考,具体内容如下 源代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1
-
vue实现员工信息录入功能
Vue通用信息录入界面,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>员工信息录入</title> <style> .btn1{ color: blue; background: skyblue; text-align: center; } </style&g
-
使用Bootstrap和Vue实现用户信息的编辑删除功能
使用Bootstrap实现简单的布局,并结合Vue进行用户信息的编辑删除等功能,代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>用户信息编辑</title> <link rel="stylesheet" type="text/css" href="bootstrap.min.cs
-
vue实现个人信息查看和密码修改功能
下面一段代码给大家介绍vue实现个人信息查看和密码修改功能,具体代码如下所述: //用了element组件,自己要加载和引入 <template> <div class="all-container"> <div class="all-container-padding bg" > <el-tabs v-model="activeName" @tab-click="handleClick&quo
-
vue实现element表格里表头信息提示功能(推荐)
如图:在element表格操作一栏需要添加提示功能 实现效果 如图:鼠标浮上去弹出tips 解决方案 1.编写组件 在 promptMessage.vue 文件里面实现 <template> <!-- 处理element表格表头文字提示特别添加全局注册组件 --> <div class="promt-message-tooltip"> <el-tooltip effect="light" placement="le
-
PHP+MySQL实现模糊查询员工信息功能示例
本文实例讲述了PHP+MySQL实现模糊查询员工信息功能.分享给大家供大家参考,具体如下: 一.代码 注意两点: 1.用Notepad+编辑时,格式选择:[编码字符集]->[中文]->[gb2312] 2. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> conn.php <?php $connID=mysql_connect("lo
-
Vue实现快捷键录入功能的示例代码
项目需要在页面使用快捷键,而且需要对快捷键进行维护,然后参考了此篇文章,改成自己的. 记录一下. 首先有一个组件,用来实现快捷键的录入操作. 直接上代码: hotkeyInput.vue <doc> 快捷键输入框 -- 用于快捷键的录入 </doc> <template> <div class="shortcut-key-input" :class="{ cursor: focus }" :style="$prop
-
jquery实现员工信息添加与删除功能
本文实例为大家分享了jquery实现员工信息添加与删除功能的具体代码,供大家参考,具体内容如下 员工表格添加用了jquery事件 主要按钮绑定事件 <!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript&quo
-
Vue前端登录token信息验证功能实现
用户在首次访问网站时,应在登录页面填写账号密码,前端携带用户信息向服务器请求. 1.服务器验证用户信息 验证失败:给前端响应数据 验证通过:对该用户创建token,并以响应数据返回给前端 2.前端接受后端响应的数据 错误信息:提示错误消息 正确信息:页面进行跳转至首页,同时保存token(可以保存在cookie或localstorage) 3.用户点击某功能模块的触发请求(比如某功能有权限设置或是是否需要token) 利用路由守卫beforeEach() 将保存的token添加至请求拦截器的请求
-
Java实现员工信息管理系统
在Java SE中,对IO流与集合的操作在应用中比较重要.接下来,我以一个小型项目的形式,演示IO流.集合等知识点在实践中的运用. 该项目名称为“员工信息管理系统”(或“员工收录系统”),主要是通过输入员工的id.姓名信息,实现简单的增删改查功能. 该项目主要在DOS窗口的控制台或者Eclipse的控制台上进行操作.操作界面如下: 该项目的文件结构如下: Step 1: 入口类SystemMain的代码为: package empsystem; import java.util.Scanner;
-
Python 模拟员工信息数据库操作的实例
1.功能简介 此程序模拟员工信息数据库操作,按照语法输入指令即能实现员工信息的增.删.改.查功能. 2.实现方法 • 架构: 本程序采用python语言编写,关键在于指令的解析和执行:其中指令解析主要运用了正则表达式来高效匹配有效信息:指令执行通过一个commd_exe主执行函数和增.删.改.查4个子执行函数来实现,操作方法主要是运用面向对象方法将员工信息对象化,从而使各项操作都能方便高效实现.程序主要函数如下: (1)command_exe(command) 指令执行主函数,根据指令第一个字段