使⽤vue框架实现⼯资计算器<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="vue.js"></script>
<title>个税计算</title>
<style>
body
{
margin: 0px;
}
header
{
background-color: lightgreen;
line-height: 45px;
text-align: center ;
font-size: 24px;
color: white;
}
#result
{
padding: 10px 20px;
}
#result>input
{
font-size: 18px;
-moz-appearance:textfield;
width: 100%;
height: 35px;
border-radius: 5px;
border: 1px solid gray;
}
dt
{
padding-top: 10px ;
float: left ;
}
dd
{
padding-top: 10px;
float: right;
}
dt input
{
width: 20px;
text-align: center;
-moz-appearance:textfield;
}
.clear
{
clear: both;
}
</style>
</head>
<body>
<div id="app">
<header>
个税计算器
</header>
<div id="result">
<input type="number" v-model='income'>
<!--            DIV + CSS-->
<dl v-show ='income >=1600'>
<dt>
养⽼保险
<input type="number" v-model='yanglao'>
%
</dt>
<dd>{{income * yanglao / 100 | double}}</dd>
<div class="clear"></div>
<dt>
医疗保险
<input type="number" v-model='yiliao'>
%
</dt>
<dd>{{income * yiliao / 100 | double}}</dd>
<div class="clear"></div>
<dt>
失业保险
<input type="number" v-model='shiye'>
%
</dt>
<dd>{{income * shiye / 100 | double}}</dd>
<div class="clear"></div>
<dt>
住房公积⾦
<input type="number" v-model='gongjijin'>
%
</dt>
<dd>{{income * gongjijin / 100 | double}}</dd>
<div class="clear"></div>
<dt>
税前⼯资
</dt>
<dd>{{shuiqiangongzi | double}}</dd>
<div class="clear"></div>
<dt>
个⼈所得税
</dt>
<dd>{{suodeshui | double}}</dd>
<div class="clear"></div>
<hr>
<dt>
税后⼯资
</dt>
<dd>{{shuiqiangongzi - suodeshui | double}}</dd>
<div class="clear"></div>
</dl>
<p v-show='income < 1600'>您的⼯资太少</p>
</div>
</div>网页计算器html代码
<script>
new Vue({
el : '#app' ,
data:
{
income : 10000 ,
yanglao : 8 ,
yiliao : 2 ,
shiye : 0.3 ,
gongjijin : 8
},
filters:
{
double:function(value)
{
Fixed(2)
}
},
computed:
{
shuiqiangongzi:function()
{
return this.income - ((this.yanglao + this.shiye +                    jijin + this.yiliao) * this.income / 100)                },
suodeshui:function()
{
var jishuigongzi = this.shuiqiangongzi-3500;                    if(jishuigongzi<=0)
{
return 0;
}else
{
//需要缴税
if(jishuigongzi<=1500)
{
return jishuigongzi*0.03;
}else if(jishuigongzi<=4500)
{
return jishuigongzi*0.1-105;
}else if(jishuigongzi<=9000)
{
return jishuigongzi*0.2-555;
}else if(jishuigongzi<=35000)
{
return jishuigongzi*0.25-1005;
}else if(jishuigongzi<=55000)
{
return jishuigongzi*0.3-2775;
}else if(jishuigongzi<=80000)
{
return jishuigongzi*0.35-5505;
}else
{
return jishuigongzi*0.45-13505;
}                    }                }
}
})
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。