假如:
第一年工资:1万,
每年涨幅:5%,
那么十年内的收入详情如下图:
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>zhengshize</title> <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css" /> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <script src="https://cdn.bootcss.com/iview/3.4.2/iview.min.js"></script> <style> .content { margin: 30px auto; max-width: 1000px; } .input_width { width: 120px; } </style> </head> <body> <div id="zhengshize"> <div class="content"> <Row> <i-col span=21> <i-form :label-width="120" inline> <form-item label="当前工资:"> <i-input type="text" class="input_width" v-model="wage" /> </form-item> <form-item label="每年涨幅(%):"> <i-input type="text" class="input_width" v-model="yearly" /> </form-item> <form-item label="多少年内:"> <Input-Number type="text" class="input_width" v-model="years" /> </form-item> </i-form> </i-col> <i-col span=3> <i-button @click="calc(true)">重置</i-button> <i-button type="primary" @click="calc()">计算</i-button> </i-col> </Row> <Alert> <Row style="text-align:center"> <i-col span=6>税前总收入:<strong>{{gainsAll | zheng}}</strong> 万</i-col> </Row> </Alert> <i-table :loading="loading" :columns="columns1" :data="data1" size="small" border highlight-row></i-table> </div> </div> <script type="text/javascript"> new Vue({ el: "#zhengshize", data: { loading: true, wage: 10000, yearly: 5, years: 10, gains: 0, gainsAll: 0, columns1: [ { type: "index", title: "第几年", sortable: true, align: 'center' }, { title: '相比第一年涨(%)', align: 'center', sortable: true, key: 'perGains' }, { title: '每年涨幅(%)', align: 'center', key: 'gains' }, { title: '税前月收入(元)', align: 'center', sortable: true, key: 'currentYearGains' }, { title: '税前年收入(万元)', align: 'center', sortable: true, key: 'currentYearAllGains' }, ], data1: [ { currentYearGains: "", gains: "", perGains: "", currentYearAllGains: "" } ], }, methods: { calc(res) { this.gainsAll = 0; this.data1 = []; if(res) { this.wage = 10000; this.yearly = 5; this.years = 10; } for (let i = 0; i < this.years; i++) { let curPercent = Math.pow((1 + this.yearly / 100), i), // 相比第一年的比例 currentYearGains = (this.wage * (curPercent)), // 每年的工资 perPercent = (curPercent - 1) * 100; // 相比第一年涨幅 this.data1.push({ currentYearGains: currentYearGains.toFixed(2), gains: this.yearly, perGains: perPercent.toFixed(2), currentYearAllGains: (currentYearGains*12/10000).toFixed(2) }); this.gainsAll = this.gainsAll + (currentYearGains * 12 / 10000); } this.loading = false; } }, created() { this.calc(); }, filters: { zheng(data) { return (data).toFixed(2) || 0; } } }); </script> </body> </html>