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