生活随笔
收集整理的這篇文章主要介紹了
vue.js--实现输出员工工资表
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
vue.js實現(xiàn)輸出員工工資表
話不多說先看效果圖
這個就是程序運行的結果。
開發(fā)步驟如下
1.首先熟悉vue.js的小伙伴都知道要寫vue.js需要文件引入。
代碼如下：
<script src="../JS/vue.js"></script>
2. 定義div元素，并設置其id屬性為example，在該元素定義2個標簽為遠攻工資表標題 在第二個標簽內進行數(shù)據(jù)綁定用v-for指令進行列表渲染
3. 創(chuàng)建vue實例，在實例中分別定義掛在元素，數(shù)據(jù)和計算屬性，在數(shù)據(jù)中定義員工的專項扣除費用，個稅，稅率 和員工數(shù)組計算屬性中定義wages屬性及其所對應的函數(shù)
這就是一個大概的開發(fā)思路下面看完整代碼
<!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--实现输出员工工资表的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。
