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

28,135 阅读5分钟

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

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

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

效果展示

码上掘金

code.juejin.cn/pen/7142029…

运行展示

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

贷款金额: 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.juejin.cn/) ,选择【新建代码片段】【新建空白片段】来创建拥有vue.js环境的项目。

创建完毕后,我们引入vue.js,在【Script】右边的设置按钮,我们点击后,可以弹出引用依赖界面。

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

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

我们写个demo尝试下

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

页面编写

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

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

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

就是几个input框 再加 一个 按钮,就可以完成该需求,这里不过多做展示,我们稍微修饰下css,再看看效果,这里就不贴css代码了哈。

哎,是不是感觉清爽很多了呢。

贷款计算方法

贷款分为【等额本金】 和 【等额本息】 ,我们简单介绍下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

我们再来看看等额本息呢

等额本金较为复杂,这里直接给出计算公式就可以了,如果需要推理过程,可以在网上搜搜看。

image.png

我们带入我们上面的公式

image.png

结果为: 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))

如上代码是套用了公式:

最后的结果保留了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年,谁更划算了吧。有意思吧,来,动动小手指,快来试试吧。