我正在参与「码上挑战赛」详情请看:码上挑战赛来了!

各位大佬预备买房了么? 你知道告贷30年和告贷100年,首月还款额会下降多少么? 让我们用vue写个房贷核算器来奉告你吧。

各位前端大佬,不要笑话,运维小弟献丑了。

效果展示

码上

工作展示

房贷30年和100年谁更合算,写个vue实例奉告你

房贷30年和100年谁更合算,写个vue实例奉告你

房贷30年和100年谁更合算,写个vue实例奉告你

房贷30年和100年谁更合算,写个vue实例奉告你

为了直观便利,我们列一个表格吧

告贷金额: 100W 年利率: 5.8%
告贷时刻 等额本金(首月还款) 等额本息(首月还款)
30年 7,611.11 5,867.53
50年 6,500.00 5,116.85
100年 5,666.67 4,848.22
1000年 4,916.67 4,833.33

初始化项目

假如你现已运用过【码上】创建项目,能够略过本段落。

我们打开【码上】(code./) ,挑选【新建代码片段】【新建空白片段】来创建具有vue.js环境的项目。

房贷30年和100年谁更合算,写个vue实例奉告你

创建结束后,我们引进vue.js,在【Script】右边的设置按钮,我们点击后,能够弹出引证依靠界面。

房贷30年和100年谁更合算,写个vue实例奉告你

我们在【增加依靠资源】处填写上: cdn.jsdelivr.net/npm/vue@2.6…

房贷30年和100年谁更合算,写个vue实例奉告你

至此,我们项目初始化便完结了。

我们写个demo测验下

房贷30年和100年谁更合算,写个vue实例奉告你

如上,我们编写了一个demo且顺利工作,就证明环境设置的没问题。

页面编写

我们想象我们整个页面分为2部分,左边部分为用户输入,右边为展示页面,详细图如下:

房贷30年和100年谁更合算,写个vue实例奉告你

核算展示效果,我们就用表格套出来就能够了,这个暂不介绍,我们着重要介绍下用户输入部分。作为一款房贷核算器,最主要的功用是让用户输入 告贷额、告贷利率、告贷年限以及告贷方式,所以,我们很容易写出骨架代码来,如下:

<div id="app">
  <div id="op">
    <h1>房贷核算器</h1>
    <label>告贷金额:</label>
    <input class="inputNum" type="number">
    <label></label>
    <br />
    <label>告贷利率: </label>
    <input class="inputNum" type="number">
    <label>%</label>
    <br />
    <label>告贷方式: </label>
    <input type="radio" name="modes" value="type1">
    等额本金
    <label></label>
    <input type="radio" name="modes" value="type2">
    等额本息
    <br />
    <label> 告贷年限: </label> 
    <input class="inputNum" type="number">
    <label></label>
    <br />
    <br />
    <button @click="getInterestInfo">核算利率</button>
    <br />
    <br />
  </div>
</div>

房贷30年和100年谁更合算,写个vue实例奉告你

就是几个input框 再加 一个 按钮,就能够完结该需求,这儿不过多做展示,我们略微修饰下css,再看看效果,这儿就不贴css代码了哈。

房贷30年和100年谁更合算,写个vue实例奉告你

哎,是不是感觉清新许多了呢。

告贷核算办法

告贷分为【等额本金】 和 【等额本息】 ,我们简单介绍下2者的差异以及算法

我们假定告贷30W,告贷年利率:5.8% ,告贷年限: 30年。

我们来看下运用等额本金怎样核算的 。

核算告贷月份 和 告贷月利率

已知告贷年限为30年,所以告贷月份为: 30 * 12 == 360(月)

告贷月利率,我们就保存小数点后4位就能够了。

告贷年利率为: 5.8% ,所以告贷月利率为: 5.8% / 12 == 0.4833%

每个月偿还的本金为: 30w / 360(月) == 833.33(元)

第一个月偿还的利息为: 30w * 0.4833% == 1449.9

所以第一个月总还款额: 1449.9 + 833.33 == 2283.23

第二个月偿还的本金和第一个月偿还的本金共同,也是833.33,仅仅偿还的利息不同了。

第二个月偿还的利息: (30w-833.33) * 0.4833% == 1445.96

所以第二个月总还款额: 1445.96 + 833.33 == 2279.29

后边的以此类推

直至终究一个月还款额仅为本金: 833.33

我们再来看看等额本息呢

等额本金较为复杂,这儿直接给出核算公式就能够了,假如需求推理进程,能够在网上搜搜看。

房贷30年和100年谁更合算,写个vue实例奉告你

我们带入我们上面的公式

房贷30年和100年谁更合算,写个vue实例奉告你

效果为: x = 1670.18

vue编写

上一步我们现已推导了等额本息 和 等额本息的算法,我们来看下程序应该怎样编写呢,我们将按钮绑定一个点击工作,传到办法: getInterestInfo ,我们先要核算出告贷总额、告贷月利率 以及 告贷月数,代码如下:

var aAmount = this.amount * 10000
var aMonInterest = this.interest / 100 / 12
var aMonth = this.years * 12

如上代码,是这样的,我们传入的金额单位是(万),所以需求乘以10000,而传入的利率是年百分利率,所以我们核算月利率,需求先除以100再除以12,传入的是年数,所以我们要核算月数,需求乘以12

我们别离来看下等额本金和等额本息核算办法:

console.log("等额本息")
// 核算办法
var fenzi = aAmount * aMonInterest * Math.pow((1+aMonInterest),aMonth)
var fenmu = Math.pow((1+aMonInterest),aMonth) - 1
var monRepayment = fenzi / fenmu
var sumRepayment = monRepayment * aMonth
console.log("月还款额: " , monRepayment.toFixed(2) , " 总还款额: " , sumRepayment.toFixed(2) , " 总利息: " , (sumRepayment - aAmount).toFixed(2))

如上代码是套用了公式:

房贷30年和100年谁更合算,写个vue实例奉告你

终究的效果保存了2位。

而等额本金,我们核算办法如下:

console.log("等额本金")
// 核算办法
var firstAccrual = (aAmount * aMonInterest).toFixed(2)
var firstRepay =  ((aAmount / aMonth) + (aAmount * aMonInterest)).toFixed(2)
console.log("第一个月还款额: " , firstRepay)
var temp = aAmount
var sum = 0
for(let i=1;i<=aMonth;i++) {
  sum = sum + (aAmount / aMonth) + (temp * aMonInterest)
  temp = temp - (aAmount / aMonth)
}
console.log("总还款额: " , sum.toFixed(2) , "总利息: " , (sum-aAmount).toFixed(2))

如上代码,我们运用的是暴力求解,即: 我们循环告贷月数,然后再来核算每个月的利息,终究加上本金就是本月还款额,然后将每个月的还款数叠加。

不管是等额本金和等额本息,我们核算总利息的办法都是相同的,那就是运用还款总额 减去 告贷本金 就是总利息了。

如上还有许多细节没有介绍到,大家能够看源码剖析下。

总结

由于篇幅的联系,我们没有过多介绍,而是独自将等额本息和等额本金核算办法拉出来剖析了一波,大家假如对其他方面还感兴趣,能够点进文章上面【码上】进行检查。好了,现在知道告贷30年和告贷100年,谁更合算了吧。有意思吧,来,动动小手指,快来试试吧。