Vue.js输出员工工资表 

typora-copy-images-to: upload

Vue.js输出员工工资表

效果图片

输出员工工资表图片

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>输出员工工资表</title>
<style>
body{
    font-family:微软雅黑;
    font-size:14px
​
}
.title{
    background: pink;
    font-size:18px;
}
.title,.content{
    width:500px;
    height:36px;
    line-height:36px;
    border: 1px solid green;
}
.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>

 

posted @ 2022-04-10 20:07  梅七  阅读(353)  评论(0)    收藏  举报