vue版个税计算器

最新推荐文章于 2024-04-19 16:48:39 发布

WD-CHINA

最新推荐文章于 2024-04-19 16:48:39 发布

阅读量1.7k

点赞数 2

分类专栏： JavaScript Vue

本文链接：https://blog.csdn.net/qq_44692640/article/details/90272808

版权

JavaScript 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

Vue

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	
	<!-- 总工资计算 -->
	<div id="my-app">
		<span>基本工资</span>
		<input type="text" placeholder="基本工资" v-model.number="a">
		<br>
		<span>奖金</span>
		<input type="text" placeholder="奖金" v-model.number="b">
		<br>
		<span>绩效</span>
		<input type="text" placeholder="绩效" v-model.number="c">
		<br>
		<p>总工资：{{total()}}</p>
		<br>
		

		<label>养老保险</label>
		<input type="text" v-model.number="d">
		<label>%</label>
		<label>￥{{yanglao()}}</label>
		<br>
		

		<label>医疗保险</label>
		<input type="text" v-model.number="e">
		<label>%</label>
		<label>￥{{yiliao()}}</label>
		<br>
		

		<label>工伤保险</label>
		<input type="text" v-model.number="f">
		<label>%</label>
		<label>￥{{gongshang()}}</label>
		<br>
		<label>失业保险</label>
		<input type="text" v-model.number="g">
		<label>%</label>
		<label>￥{{shiye()}}</label>
		<br>
		<label>生育保险</label>
		<input type="text" v-model.number='h'>
		<label>%</label>
		<label>￥{{shengyu()}}</label>
		<br>
		<label>公积金</label>
		<input type="text" v-model.number="i">
		<label>%</label>
		<label>￥{{gongjijin()}}</label>
		
		<br>
		<label >税前工资：￥{{shuiqian()}}</label>
		<br >
		<label>个税：￥{{geshui()}}</label>
		<br>
		<label>税后工资：￥{{shuihou()}}</label>
		

		
		
	</div>
	<br>

	
	
	<script src="js/vue.js"></script>
	<script>
		var app = new Vue({
			el:"#my-app",
			data:{
				a:0,
				b:0,
				c:0,
				d:8,
				e:2,
				f:0,
				g:0.5,
				h:0,
				i:8
				
			},
			methods:{
				total:function(){
					return this.a + this.b + this.c
				},
				yanglao:function(){
					return this.total()*this.d*0.01
				},
				yiliao:function(){
					return this.total()*this.e*0.01
				},
				gongshang:function(){
					return this.total()*this.f*0.01
				},
				shiye:function(){
					return this.total()*this.g*0.01
				},
				shengyu:function(){
					return this.total()*this.h*0.01
				},
				gongjijin:function(){
					return this.total()*this.i*0.01
				},
				shuiqian:function(){
					if (this.total()>=5000){
						return this.total()-this.yanglao()-this.yiliao()-this.gongshang()-this.shiye()-this.shengyu()-this.gongjijin()
					}else{
						return 0
					}
					
				},
				nashuisuode:function(){
					
					return this.total()-5000
					
					
				},
				geshui:function(){
					
					
					if(this.nashuisuode()<0){
						return this.nashuisuode() *0
					}else if(this.nashuisuode()<=3000){
						return this.nashuisuode()* 0.03
					}else if(this.nashuisuode()<=12000){
						return this.nashuisuode() * 0.1
					}else if(this.nashuisuode()<=25000){
						return this.nashuisuode() * 0.2
					}else if(this.nashuisuode()<=35000){
						return this.nashuisuode() * 0.25
					}else if(this.nashuisuode()<=55000){
						return this.nashuisuode() * 0.3
					}else if(this.nashuisuode()<=80000){
						return this.nashuisuode() * 0.35
					}else{
						return this.nashuisuode() * 0.45
					}
				},
				shuihou:function(){
					return this.shuiqian()-this.geshui()
				}

			}
			
		})
		
		

		
		
	</script>
</body>
</html>

WD-CHINA

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
vue版个税计算器

<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compati...
复制链接

扫一扫