原创文章:使用Vuejs实现个人所得税功能，以及5000起点和3500起点之间的缴费变化兼容移动端

html和Vue 部分代码:

</div>
<div id='gsqd'>
<div class='gswq' >
<h3>个税5000计算结果</h3>
<div>

<div class="kv-item">
<label>应纳税所得额：</label>
<div class="kv-item-content">
<input type="text" placeholder="应纳税所得额" v-model="gongz1">
</div>
</div>
<div class="kv-item">
<label>应纳税额：</label>
<div class="kv-item-content">
<input type="text" placeholder="应纳税额" v-model="jishuiCalc1">
</div>
</div>
<div class="kv-item">
<label>税后工资：</label>
<div class="kv-item-content">
<input type="text" placeholder="税后工资" v-model="gongz2" >
</div>
</div>

</div>
</div>
<div class='gssqw'>
<div class="subfiled ">
<h3>个税3500计算结果</h3>
</div>
<div class="subfiled-content" >
<div class="kv-item">
<label>应纳税所得额：</label>
<div class="kv-item-content">
<input type="text" placeholder="应纳税所得额" v-model="gongz11" >
</div>
</div>
<div class="kv-item">
<label>应纳税额：</label>
<div class="kv-item-content">
<input type="text" placeholder="应纳税额" v-model="jishuiCalc11">
</div>
</div>
<div class="kv-item">
<label>税后工资：</label>
<div class="kv-item-content">
<input type="text" placeholder="税后工资" v-model="gongz22" >
</div>
</div>

</div>
</div>
</div>
<div class='jieguo'>
<h1 style='color:#f5302e;font-size: 18px;font-weight:700;'>新个税执行：每个月个税少交:{{(gongz2-gongz22).toFixed(2)}}元,一年下来可以节省{{((gongz2-gongz22)*12).toFixed(2)}}元!</h1>
</div>

</div>

gongz11: 0, //应纳税所得额 12000-2000-3500
gongz22: 0, //实发工资
isReadOnly : true,
},
methods: {},
computed: {

jishuiCalc1: function() {
var jishuied = this.gongz - this.wuxianyijin - 5000;
jishuied = jishuied > 0 ? jishuied : 0;
this.gongz1 = jishuied;
var jishui = this.gongz1;
var shuilu = 0;
var xujian = 0;
//计算交税工资及实发工资。
if(0 < jishui && jishui <= 2910) {
shuilu = 0.03;
xujian = 0;
} else if(2910 < jishui && jishui <= 11010) {
shuilu = 0.1;
xujian = 210;
} else if(11010 < jishui && jishui <= 21410) {
shuilu = 0.2;
xujian = 1410;
} else if(21410 < jishui && jishui <= 28910) {
shuilu = 0.25;
xujian = 2660;
} else if(28910 < jishui && jishui <= 42910) {
shuilu = 0.30;
xujian = 4410;
} else if(42910 < jishui && jishui <= 59160) {
shuilu = 0.35;
xujian = 7160;
} else if(jishui > 59160) {
shuilu = 0.45;
xujian = 15160;
}
jishuied = (shuilu * jishui - xujian).toFixed(2);
this.gongz2 = (this.gongz - this.wuxianyijin - jishuied).toFixed(2);
return jishuied;
},
jishuiCalc11: function() {
var jishuied = this.gongz - this.wuxianyijin - 3500;
jishuied = jishuied > 0 ? jishuied : 0;
this.gongz11 = jishuied;
var jishui = this.gongz11;
var shuilu = 0;
var xujian = 0;
//计算交税工资及实发工资。
if(0 < jishui && jishui <= 1455) {
shuilu = 0.03;
xujian = 0;
} else if(1455 < jishui && jishui <= 4155) {
shuilu = 0.1;
xujian = 105;
} else if(4155 < jishui && jishui <= 7755) {
shuilu = 0.2;
xujian = 555;
} else if(7755 < jishui && jishui <= 27255) {
shuilu = 0.25;
xujian = 1005;
} else if(27255 < jishui && jishui <= 41255) {
shuilu = 0.30;
xujian = 2755;
} else if(41255<jishui && jishui <= 57505) {
shuilu = 0.35;
xujian = 5505;
} else if(jishui > 57505) {
shuilu = 0.45;
xujian = 13505;
}
jishuied = (shuilu * jishui - xujian).toFixed(2);
this.gongz22 = (this.gongz - this.wuxianyijin - jishuied).toFixed(2);
return jishuied;
}

}
});
</script>

css部分

#saper-container {
width:86%;
margin:0 auto;
}
#saper-container>.header {
margin:10px 2%;
}
#saper-bd>.subfiled,#gsqd>.gswq>h3,.gssqw>h3 {
background:#66CDAA;
}
#saper-bd>.subfiled>h3 {
height:30px;
line-height:30px;
margin-left:20px;
}
#saper-bd>.subfiled-content {
width:100%;
height:140px;
}
#saper-bd>.subfiled-content>.kv-item{
margin-left:20px;
height:70px;
}
/*个税5000和个税3500对比*/
#gsqd {
width:100%;
}
#gsqd>.gswq {
width:50%;
float:left;
border: 1px solid #C1D3DE;
height:240px;
}
#gsqd>.gswq>h3 {
padding-left:20px;
height:30px;
line-height:30px;
}
#gsqd>.gswq>div {
margin-left:20px;
}
.gssqw {
width:49%;
float:left;
margin-left:3px;
height:240px;
border: 1px solid #C1D3DE;
}
.gssqw>.subfiled>h3 {
background:#66CDAA;
height:30px;
line-height:30px;
padding-left:20px;
}
.gssqw>.subfiled-content {
margin-left:20px;
}
.jieguo {
text-align:center;
margin-top:20px;
}

@media screen and (max-width: 480px) {
#gsqd>.gswq,#gsqd>.gssqw {
width:100%;
}
#gsqd>.gssqw {
margin-top:20px;
}
}

原创文章：原文链接https://www.denglu.net/Tools/grsds/

原创文章:使用Vuejs实现个人所得税功能，以及5000起点和3500起点之间的缴费变化兼容移动端相关推荐

html和js制作个人所得税表格,原创文章:使用Vuejs实现个人所得税功能兼容移动端...
使用vuejs实现个人所得税的功能,包含5000起点和3500起点之间个税的变化,并且兼容移动端. css部分如下: #saper-container { width:86%; margin:0 au ...
分析手机网站的优势思维结构图_写了100多篇原创文章，我常用的在线工具网站推荐给大家...
摘要不知不觉写博客已经一年多了,累计写了100多篇原创文章,今天给大家分享下我经常使用的在线工具网站,希望对大家有所帮助! Markdown Nice 支持自定义样式的在线Markdown编辑器,编 ...
PMCAFF原创文章人气周榜第三期(原创干货由你评鉴，在评论里写下你的看法吧~)
又是一周一度原创精选包上架的时候啦,上一周PMCAFF又产生了一大波优质的原创产品干货,其中<职场社交是一个真需求吗?>引发讨论热议,<「会会」产品体验报告>引发人思考,< ...
网络拓扑图画图工具_写了100多篇原创文章，我常用的在线工具网站推荐给大家！...
不知不觉写博客已经一年多了,累计写了100多篇原创文章,今天给大家分享下我经常使用的在线工具网站,希望对大家有所帮助! Markdown Nice 支持自定义样式的在线Markdown编辑器,编辑完成 ...
文章采集伪原创工具_伪原创文章技巧（如何提高伪原创文章的原创度）
伪原创是目前最鲜为人知的文章处理方式,做seo网站优化的也许知道,目前传统的文章伪原创方式的作用已经是越来越低了,所以我们文章在做伪原创时必须要提高伪原创文章的原创度,这样才能让搜索引擎更加信任我们, ...
伪原创文章特点（高质量的伪原创文章有哪些特点）
不论是原创还是伪原创都希望被搜索引擎收录,页面被收录对网站具有重要意义,除了积累网站的权重,还使得网站的长尾关键词能够有效发挥作用.当然,我们在写的伪原创文章中不但要符合搜索引擎的要求,也要给用户一个 ...
伪原创文章写作格式（符合seo优化的文章规范是什么）
我们做seo网站优化最常用的做收录手段就是通过做文章来实现,seo的重点在于内容,笔者多次强调过内容为王的道理.原则上高质量的原创文章对于网站优化来说,效果是最好的.为了搜索引擎能更好的收录我们的文章 ...
seo文章伪原创技巧（你不知道的伪原创文章处理技巧）
大家做网站seo优化的都知道,现在搜索引擎对网站内页的文章内容越来越看重,对这一块的审核也是越来越严格,造成一部分的站长苦不堪言,每天在网站更新的文章都不收录,有的收录了一段时间后又被删除,我们的伪原 ...
文章收录技巧（怎么提升网站伪原创文章的收录）
最近很多站长都被一个问题所困扰,那就是收录问题,我们都知道网站收录一直是SEO优化考核的重要标准之一,所以这个问题对我们的影响非常大.很大部分站长做网站收录都是用文章来做的,所以解决收录问题就是要提升 ...

原创文章:使用Vuejs实现个人所得税功能，以及5000起点和3500起点之间的缴费变化兼容移动端

原创文章:使用Vuejs实现个人所得税功能，以及5000起点和3500起点之间的缴费变化兼容移动端相关推荐

最新文章

热门文章