用vue做出个人所得税的计算
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title>Document</title>
<script src=”./vue.js”></script>
<style>
input {
width: 100px;
height: 25px;
}
.main {
margin-top: 10px;
width: 400px;
height: 400px;
}
.main input {
margin-top: 5px;
}
p {
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
</head>
<body>
<div id=”app”>
<label>基本工资</label>
<input type=”text” v-model.number=”a” />
<br />
<label>绩效工资</label>
<input type=”text” v-model.number=”b” />
<div :class=”calc” style=”color: red”>
基本工资{{a}} + 绩效工资{{b}}你的税前工资是:{{result}}
<p v-show=”result<1500″>您的工资太少</p>
</div>
<div class=”main” v-show=”result>1500″>
<hr />
<p>
<label>养老保险<input type=”text” v-model.number=”d” /> %</label>
<span>{{ddd}}</span>
</p>
<p>
<label>医疗保险<input type=”text” v-model.number=”d1″ /> % </label>
<span>{{ddd1}}</span>
</p>
<p>
<label>工伤保险<input type=”text” v-model.number=”d2″ /> % </label>
<span>{{ddd2}}</span>
</p>
<p>
<label>生育保险<input type=”text” v-model.number=”d3″ /> % </label>
<span>{{ddd3}}</span>
</p>
<p>
<label>失业保险<input type=”text” v-model.number=”d4″ /> %</label>
<span>{{ddd4}}</span>
</p>
<p>
<label
>公积金 <input type=”text” v-model.number=”d5″ />
%</label
>
<span>{{ddd5}}</span>
</p>
<hr />
<p><label>税前工资</label> <span>{{result}}</span></p>
<p><label>个税</label><span>{{ddd6}}</span></p>
<p><label>税后工资</label><span>{{ddd7}}</span></p>
</div>
</div>
<script>
let vm = new Vue({
el: “#app”,
data: {
a: 0,
b: 0,
d: 8,
d1: 2,
d2: 0.5,
d3: 0,
d4: 0,
d5: 8,
d6: 2.2,
},
methods: {},
computed: {
calc: function () {
return (this.result = this.a + this.b);
},
ddd: function () {
return this.calc * (this.d / 100);
},
ddd1: function () {
return this.calc * (this.d1 / 100);
},
ddd2: function () {
return this.calc * (this.d2 / 100);
},
ddd3: function () {
return this.calc * (this.d3 / 100);
},
ddd4: function () {
return this.calc * (this.d4 / 100);
},
ddd5: function () {
return this.calc * (this.d5 / 100);
},
ddd6: function () {
return this.calc * (this.d6 / 100);
},
ddd7: function () {
return (
this.calc –
(this.ddd +
this.ddd1 +
this.ddd2 +
this.ddd3 +
this.ddd4 +
this.ddd5 +
this.ddd6)
);
},
},
});
</script>
</body>
</html>
效果如下:
版权声明：本文为yangcaicai原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。