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

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

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

效果展示

码上掘金

code.juejin.cn/pen/7142029…

运行展示

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

初始化项目

如果你已经使用过【码上掘金】创建项目，可以略过本段落。

我们打开【码上掘金】(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

我们再来看看等额本息呢

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

我们带入我们上面的公式

结果为: 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年，谁更划算了吧。有意思吧，来，动动小手指，快来试试吧。