Wages rose 10,000 in pre-tax income details 5% per year a decade

if:

The first annual salary: 10000,

Annual increase: 5%

Then the income particulars in the decade following figure:

code show as below:

<!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"</calculated>= "Calc ()"@clicki-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: " The first few years " , 
              the sortable: to true , 
              align = left: ' Center ' 
            }, 
            { 
              title: ' the first year up (%) compared to the ' , 
              align = left: ' Center ' , 
              the sortable: to true , 
              Key: ' perGains ' 
            }, 
            { 
              title: 'Increase per year (%) ' , 
              align = left: ' Center ' , 
              Key: ' Gains, ' 
            }, 
            { 
              title: ' pretax monthly income (yuan) ' , 
              align = left: ' Center ' , 
              sortable: to true , 
              Key: ' currentYearGains ' 
            }, 
            { 
              title: ' pre-tax annual income (million) ' , 
              align = left: ' 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>
All Code

 

Guess you like

Origin www.cnblogs.com/zhengshize/p/11115804.html