vue.js--实现输出员工工资表

vue.js实现输出员工工资表

话不多说先看效果图
这个就是程序运行的结果。
开发步骤如下
1.首先熟悉vue.js的小伙伴都知道要写vue.js需要文件引入。
代码如下：
<script src="../JS/vue.js"></script>
2. 定义div元素，并设置其id属性为example，在该元素定义2个标签为远攻工资表标题在第二个标签内进行数据绑定用v-for指令进行列表渲染
3. 创建vue实例，在实例中分别定义挂在元素，数据和计算属性，在数据中定义员工的专项扣除费用，个税，税率和员工数组计算属性中定义wages属性及其所对应的函数
这就是一个大概的开发思路下面看完整代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>输出员工工资表</title>
<style>
body{font-family:微软雅黑;
font-size:14px}
.title{background: #f6f6f6;
font-size:18px;
}
.title,.content{width:500px;
height:36px;
line-height:36px;
border: 1px solid #dddddd;}
.title:not(:first-child),.content{border-top:none;}
.title div{width:100px;
text-align:center;
float:left}
.content{clear:both}
.content div{width:100px;
text-align:center;
float:left}
</style>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="example"><div class="title"><div>姓名</div><div>月度收入</div><div>专项扣除</div><div>个税</div><div>工资</div></div><div class="content" v-for="(value,index) in staff"><div>{{value.name}}</div><div>{{value.income}}</div><div>{{insurance}}</div><div>{{wages[index]}}</div><div>{{value.income-insurance-wages[index]}}</div></div>
</div>
<script type="text/javascript">
var vm = new Vue({el:'#example',data:{insurance : 1000,//专项扣除费用threshold : 5000,//个税起征点tax : 0.03,//税率staff : [{//员工数组name : '张无忌',income : 6600,},{name : '令狐冲',income : 8000,},{name : '韦小宝',income : 7000,}]},computed : {wages : function(){var t = this;var taxArr = [];this.staff.forEach(function(s){taxArr.push((s.income-t.threshold-t.insurance)*t.tax);});return taxArr;//个税数组}}
})
</script>
</body>
</html>

vue.js--实现输出员工工资表相关推荐

使用结构体输出员工工资表
<程序设计基础-c语言>杨莉刘鸿翔 ISBN-978-7-03-032903-5 p165 习题6 6.某单位工资结构体包括工资编号.职工姓名.工龄工资.考核奖金.房租水电.公积金.实发 ...
VLOOKUP函数制作多表查询（学生信息表/员工工资表）
VLOOKUP函数制作多表查询(学生信息表/员工工资表) 一.vlookup函数定义 VLOOKUP函数是Excel中的一个纵向查找函数,在工作中都有广泛应用,例如可以用来核对数据,多个表格之间快速导 ...
建立员工工资表(转)
建立员工工资表(转) 中文Office 2000软件包中提供了一个名为中文Excel 2000软件,这是一个用于建立与使用电子报表的实用程序,也是一种数据库软件,用于按表格的形式来应用数据记录.专业数 ...
利用Vue.js实现简单员工管理系统（增删查）的功能
员工管理系统注意!!此篇博客没有涉及后台数据库,所有数据自己设定,不经过数据库来增删改查!! 我们想要实现一个简单的员工管理系统案例需要以下几个步骤,我们一起来康康叭~~ 第一步:首先先实现基础的表 ...
hive根据职位给员工涨工资_华为28岁员工工资表曝光：厉害的HR，都有这些特质！...
最近微信调整了发布规则,很多小伙伴发现有时上午的内容要到晚上才能看到哦.如果不想错过或漏掉我们的重要内容,请点击本文末尾的"在看",或者点击右上角"-"界面设置 ...
MySQL 部门员工工资表综合练习
前段时间学习了MySQL数据库,今天考了一次数据库的测验,结果没考好,我发现数据库真的是逻辑比代码重要多了!将例题与代码总结于此,以便今后查漏补缺,数据库的知识点实在太密集了,之后再总结到这个 ...
Vue.js iview实现树形权限表（可扩展表）
问题: 需要一个可折叠的权限管理系统,用表格展示. 主要用的iView组件库,有Table(表格),Tree(树形控件),Collapse(折叠面板)看起来比较符合意思深入查看Table相关范例,发 ...
计算机应用基础员工工资表,项目8 工资表数据分析《计算机应用基础项目化教程》....
Presentation on theme: "项目8 工资表数据分析 <计算机应用基础项目化教程>."- Presentation transcript: 项目8 工 ...
Vue.js+ElementUI+vant生成动态表单配置
前言我司最近在搭建一款后台管理系统,使用的是Vue全家桶配合Element-ui,遇到一个问题,需要处理很多的表单,所以想到的解决方案是通过后台配置生成动态表单,这对于我来说也算是新的挑战,涉及的功 ...

vue.js--实现输出员工工资表

vue.js实现输出员工工资表

vue.js--实现输出员工工资表相关推荐

最新文章

热门文章