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

   html和Vue 部分代码:

<link rel="stylesheet" href="https://www.denglu.net/css/grsds.css">
    <script src="https://www.denglu.net/js/vue.min.js"></script>
<div id="saper-container">
    <div class='header'>
        <span style="font-size:20px;display:inline-block;color: #458B74;">最新版个税计算器(起征点5000)</span>
    </div>
    <div id="saper-bd">
        <div class="subfiled">
            <h3>税前工资信息录入</h3>
        </div>
        <div class="subfiled-content">
                <div class="kv-item">
                    <label>税前工资：</label>
                    <div class="kv-item-content">
                        <input type="text" placeholder="税前工资" v-model="gongz">
                    </div>
                </div>
                <div class="kv-item">
                    <label>五险一金：</label>
                    <div class="kv-item-content">
                        <input type="text" placeholder="五险一金" v-model="wuxianyijin">
                    </div>
                </div>

        </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>

  
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#saper-container',
        data: {
            gongz: 10000, //税前工资(扣社保前) 12000
            wuxianyijin: 0, //五险一金
            gongz1: 0, //应纳税所得额 12000-2000-5000
            gongz2: 0, //实发工资

            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/