生活随笔
收集整理的这篇文章主要介绍了
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--实现输出员工工资表的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。
