vue+elementui 房贷计算器

loan房贷计算组件

<template><el-tabs type="border-card" v-model="loanType"><el-tab-pane label="商业贷款" name="1" class="load-card"><!-- 商业贷款 --><el-form :model="commercialLoans" :rules="rules" ref="ruleForm1" label-width="150px" class="demo-ruleForm"><el-form-item label="贷款类型" prop="loanType"><el-radio-group v-model="commercialLoans.loanType" size="small"><el-radio-button label="1">等额本金</el-radio-button><el-radio-button label="2">等额本息</el-radio-button></el-radio-group></el-form-item><el-form-item label="贷款金额(万元)" prop="totalPrice"><el-input v-model.number="commercialLoans.totalPrice" placeholder="请填写贷款金额(万元)"maxlength="6"></el-input></el-form-item><el-form-item label="期限(年)" required><el-select v-model="commercialLoans.year" placeholder="请选择期限(年)" style="width: 100%;"@change="year_picker"><el-option :label="g" :value="g" v-for="g in commercialLoans.year_list" :key="g"></el-option></el-select></el-form-item><el-form-item label="利率(%)" prop="interestRate"><el-select v-model="commercialLoans.interestRate" placeholder="请选择利率(%)" style="width: 100%;"@change="rage_picker"><el-option :label="g" :value="g" v-for="(g,gI) in commercialLoans.interestRate_list" :key="gI"></el-option></el-select></el-form-item><el-form-item><el-button type="primary" @click="submitCal('ruleForm1')" style="width: 100%">计算</el-button></el-form-item></el-form><el-card class="box-card"><div class="loan-rs"><div><p>每月月供参考(元)：</p><p class="payment">{{commercialLoans.monthlySupply}}</p></div><div class="flex-between"><div><p class="payment">{{commercialLoans.grossInterest}}</p><p>支付利息(元)：</p></div><div><p class="payment">{{commercialLoans.totalRepayment}}</p><p>还款总额(元)：</p></div></div></div></el-card></el-tab-pane><!-- 公积金贷款 --><el-tab-pane label="公积金贷款" name="2" class="load-card"><el-form :model="accumulationFund" :rules="rules" ref="ruleForm2" label-width="150px" class="demo-ruleForm"><el-form-item label="贷款类型" prop="loanType"><el-radio-group v-model="accumulationFund.loanType" size="small"><el-radio-button label="1">等额本金</el-radio-button><el-radio-button label="2">等额本息</el-radio-button></el-radio-group></el-form-item><el-form-item label="贷款金额(万元)" prop="totalPrice"><el-input v-model.number="accumulationFund.totalPrice" placeholder="请填写贷款金额(万元)"maxlength="6"></el-input></el-form-item><el-form-item label="期限(年)" prop="year"><el-select v-model="accumulationFund.year" placeholder="请选择期限(年)" style="width: 100%;"@change="year_picker"><el-option :label="g" :value="g" v-for="(g,gI) in accumulationFund.year_list" :key="gI"></el-option></el-select></el-form-item><el-form-item label="利率(%)" prop="interestRate"><el-select v-model="accumulationFund.interestRate" placeholder="请选择利率(%)" style="width: 100%;"@change="rage_picker"><el-option :label="g" :value="g" v-for="(g,gI) in accumulationFund.interestRate_list" :key="gI"></el-option></el-select></el-form-item><el-form-item><el-button type="primary" @click="submitCal('ruleForm2')" style="width: 100%">计算</el-button></el-form-item></el-form><el-card class="box-card"><div class="loan-rs"><div><p>每月月供参考(元)：</p><p class="payment">{{accumulationFund.monthlySupply}}</p></div><div class="flex-between"><div><p class="payment">{{accumulationFund.grossInterest}}</p><p>支付利息(元)：</p></div><div><p class="payment">{{accumulationFund.totalRepayment}}</p><p>还款总额(元)：</p></div></div></div></el-card></el-tab-pane><!-- 组合贷款 --><el-tab-pane label="组合贷款" name="3" class="load-card"><el-form :model="combinationLoan" :rules="rulesThree" ref="ruleForm3" label-width="160px"class="demo-ruleForm"><el-form-item label="贷款类型" prop="loanType"><el-radio-group v-model="combinationLoan.loanType" size="small"><el-radio-button label="1">等额本金</el-radio-button><el-radio-button label="2">等额本息</el-radio-button></el-radio-group></el-form-item><el-form-item label="商贷贷款金额(万元)" prop="zhs_Price"><el-input v-model.number="combinationLoan.zhs_Price" placeholder="请填写商贷贷款金额(万元)"maxlength="6"></el-input></el-form-item><el-form-item label="商贷利率(%)" prop="zhs_interestRate"><el-select v-model="combinationLoan.zhs_interestRate" placeholder="请选择利率(%)" style="width: 100%;"@change="((val)=>{rage_picker(val, 'commercialLoans_interestRate')}) "><el-option :label="g" :value="g" v-for="(g,gI) in combinationLoan.zhs_interestRate_list":key="gI"></el-option></el-select></el-form-item><el-form-item label="公积金贷款金额(万元)" prop="zhg_Price"><el-input v-model.number="combinationLoan.zhg_Price" placeholder="请填写公积金贷款金额(万元)"maxlength="6"></el-input></el-form-item><el-form-item label="公积金利率(%)" prop="zhg_interestRate"><el-select v-model="combinationLoan.zhg_interestRate" placeholder="请选择公积金利率(%)" style="width: 100%;"@change="((val)=>{rage_picker(val, 'accumulationFund_interestRate')})"><el-option :label="g" :value="g" v-for="(g,gI) in combinationLoan.zhg_interestRate_list":key="gI"></el-option></el-select></el-form-item><el-form-item label="期限(年)" required><el-select v-model="combinationLoan.year" placeholder="请选择期限(年)" style="width: 100%;"@change="year_picker"><el-option :label="g" :value="g" v-for="(g,gI) in combinationLoan.year_list" :key="gI"></el-option></el-select></el-form-item><el-form-item><el-button type="primary" @click="submitCal('ruleForm3')" style="width: 100%">计算</el-button></el-form-item></el-form><el-card class="box-card"><div class="loan-rs"><div><p>每月月供参考(元)：</p><p class="payment">{{combinationLoan.monthlySupply}}</p></div><div class="flex-between"><div><p class="payment">{{combinationLoan.grossInterest}}</p><p>支付利息(元)：</p></div><div><p class="payment">{{combinationLoan.totalRepayment}}</p><p>还款总额(元)：</p></div></div></div></el-card></el-tab-pane></el-tabs>
</template><script type="text/babel">import Vue from 'vue'import * as CFHL from '@/common/calculatorForHouseLoan' ;export default Vue.component('Loan', {data() {const totalPrice = (rule, value, callback) => { // 判断手机号是否正确if (value) {value = parseInt(value);let regTest = /^0/if (regTest.test(value) || isNaN(value)) {callback(new Error('请输入正整数'))} else {if (value * 1 > 200000) {// value = 200000;callback(new Error('请不要输入超过200000万元'))} else {callback();}}} else {callback(new Error('请输入贷款金额'));}};return {loanType: '1',commercialLoans: {monthlySupply: 0,//月供grossInterest: 0,//总利息totalRepayment: 0,//还款总额totalPrice: '',//贷款金额loanType: '2',//商贷贷款类型 1等额本金 2等额本息year: '30',//商贷期限year_list: [],//商贷期限列表interestRate: '4.9%',//商贷默认利率interestRate_index: 0,interestRate_list: ['4.9%', '3.43%', '3.675%', '3.92%', '4.17%', '4.41%', '4.66%', '5.15%', '5.39%', '5.88%', '6.37%'],//商贷利率列表},accumulationFund: {monthlySupply: 0,//月供grossInterest: 0,//总利息totalRepayment: 0,//还款总额totalPrice: '',//贷款金额loanType: '2',//公积金贷款类型 1等额本金 2等额本息year: '30',//公积金期限year_list: [],//公积金期限列表interestRate: '3.25%',//公积金默认利率interestRate_index: 0,interestRate_list: ['3.25%', '3.58%', '3.90%', '4.23%'],//公积金利率列表},combinationLoan: {monthlySupply: 0,//月供grossInterest: 0,//总利息totalRepayment: 0,//还款总额zhs_Price: '',zhg_Price: '',loanType: '2',//组合贷贷款类型 1等额本金 2等额本息year: '30',//组合期限year_list: [],//组合期限列表zhs_interestRate: '4.9%',//商贷默认利率zhs_interestRate_index: 0,zhs_interestRate_list: ['4.9%', '3.43%', '3.675%', '3.92%', '4.17%', '4.41%', '4.66%', '5.15%', '5.39%', '5.88%', '6.37%'],//商贷利率列表zhg_interestRate: '3.25%',//公积金默认利率zhg_interestRate_index: 0,zhg_interestRate_list: ['3.25%', '3.58%', '3.90%', '4.23%'],//公积金利率列表},rules: {totalPrice: [{required: true, message: '请输入贷款金额', trigger: 'blur'},{validator: totalPrice, trigger: 'blur'},],year: [{required: true, message: '请选择期限', trigger: 'change'}],interestRate: [{required: true, message: '请选择利率', trigger: 'change'}],},rulesThree: {zhs_Price: [{required: true, message: '请输入贷款金额', trigger: 'blur'},{validator: totalPrice, trigger: 'blur'},],zhg_Price: [{required: true, message: '请输入贷款金额', trigger: 'blur'},{validator: totalPrice, trigger: 'blur'},],year: [{required: true, message: '请选择期限', trigger: 'change'}],zhs_interestRate: [{required: true, message: '请选择商贷利率', trigger: 'change'}],zhg_interestRate: [{required: true, message: '请选择公积金利率', trigger: 'change'}],}}},mounted() {this.initYearList();},methods: {initYearList() {let yearList = [];for (var i = 0; i < 30; i++) {yearList.push(i + 1);}this.commercialLoans.year_list = yearList;this.accumulationFund.year_list = yearList;this.combinationLoan.year_list = yearList;console.log(this.combinationLoan.year_list);},submitCal(formName) {//等额本息    [贷款本金×月利率×（1+月利率）^还款月数]÷[（1+月利率）^还款月数－1]let that = this;this.$refs[formName].validate((valid) => {if (valid) {that.calculateLoan();that.$refs[formName].clearValidate();} else {return false;}});},calculateLoan() {let commercialLoans = this.commercialLoans;let accumulationFund = this.accumulationFund;let combinationLoan = this.combinationLoan;if (this.loanType == '1') {let detail = CFHL.calculate(commercialLoans.totalPrice * 10000, commercialLoans.interestRate.replace('%', '') / 100 / 12, commercialLoans.year * 12);if (commercialLoans.loanType == '2') {//等额本息this.commercialLoans.monthlySupply = detail.repayPerMouAi;this.commercialLoans.grossInterest = detail.totalInterestAi;this.commercialLoans.totalRepayment = detail.totalRepayAi;} else {//等额本金this.commercialLoans.monthlySupply = detail.repayPerMouthAp;this.commercialLoans.grossInterest = detail.totalInterestAp;this.commercialLoans.totalRepayment = detail.totalRepayPriceAp;}} else if (this.loanType == '2') {let detail = CFHL.calculate(accumulationFund.totalPrice * 10000, accumulationFund.interestRate.replace('%', '') / 100 / 12, accumulationFund.year * 12);if (accumulationFund.loanType == '2') {//等额本息this.accumulationFund.monthlySupply = detail.repayPerMouAi;this.accumulationFund.grossInterest = detail.totalInterestAi;this.accumulationFund.totalRepayment = detail.totalRepayAi;} else {//等额本金this.accumulationFund.monthlySupply = detail.repayPerMouthAp;this.accumulationFund.grossInterest = detail.totalInterestAp;this.accumulationFund.totalRepayment = detail.totalRepayPriceAp;}} else if (this.loanType == '3') {//商贷var detail1 = CFHL.calculate(combinationLoan.zhs_Price * 10000, combinationLoan.zhs_interestRate.replace('%', '') / 100 / 12, combinationLoan.year * 12);//公积金var detail2 = CFHL.calculate(combinationLoan.zhg_Price * 10000, combinationLoan.zhg_interestRate.replace('%', '') / 100 / 12, combinationLoan.year * 12);if (combinationLoan.loanType == '2') {//等额本息this.combinationLoan.monthlySupply = detail1.repayPerMouAi * 1 + detail2.repayPerMouAi * 1;this.combinationLoan.grossInterest = detail1.totalInterestAi * 1 + detail2.totalInterestAi * 1;this.combinationLoan.totalRepayment = detail1.totalRepayAi * 1 + detail2.totalRepayAi * 1;} else {//等额本金this.combinationLoan.monthlySupply = detail1.repayPerMouthAp * 1 + detail2.repayPerMouthAp * 1;this.combinationLoan.grossInterest = detail1.totalInterestAp * 1 + detail2.totalInterestAp * 1;this.combinationLoan.totalRepayment = detail1.totalRepayPriceAp * 1 + detail2.totalRepayPriceAp * 1;}}},year_picker(e) {//选择年份的时候切换利率列表var arr1 = [], arr2 = [];if (this.loanType == '1') {//商贷期限this.commercialLoans.year = e;if (this.commercialLoans.year == 1) {arr1 = ['4.35%', '3.045%', '3.262%', '3.48%', '3.698%', '3.915%', '4.132%', '4.568%', '4.785%', '5.22%', '5.655%']} else if (this.commercialLoans.year > 1 && this.commercialLoans.year <= 5) {arr1 = ['4.75%', '3.325%', '3.563%', '3.8%', '4.037%', '4.275%', '4.513%', '4.955%', '5.225%', '5.7%', '6.175%']} else {arr1 = ['4.9%', '3.43%', '3.675%', '3.92%', '4.17%', '4.41%', '4.66%', '5.15%', '5.39%', '5.88%', '6.37%']}this.commercialLoans.interestRate_list = arr1;this.commercialLoans.interestRate = arr1[this.commercialLoans.interestRate_index];} else if (this.loanType == '2') {//公积金期限this.accumulationFund.year = e;if (this.accumulationFund.year <= 5) {arr2 = ['2.75%', '3.025%', '3.3%', '3.575%']} else {arr2 = ['3.25%', '3.58%', '3.90%', '4.23%']}this.accumulationFund.interestRate_list = arr2;this.accumulationFund.interestRate = arr2[this.accumulationFund.interestRate_index];} else if (this.loanType == '3') {//组合贷期限this.combinationLoan.year = e;if (this.combinationLoan.year == 1) {arr1 = ['4.35%', '3.045%', '3.262%', '3.48%', '3.698%', '3.915%', '4.132%', '4.568%', '4.785%', '5.22%', '5.655%']arr2 = ['2.75%', '3.025%', '3.3%', '3.575%']} else if (this.combinationLoan.year > 1 && this.combinationLoan.year <= 5) {arr1 = ['4.75%', '3.325%', '3.563%', '3.8%', '4.037%', '4.275%', '4.513%', '4.955%', '5.225%', '5.7%', '6.175%']arr2 = ['2.75%', '3.025%', '3.3%', '3.575%']} else {arr1 = ['4.9%', '3.43%', '3.675%', '3.92%', '4.17%', '4.41%', '4.66%', '5.15%', '5.39%', '5.88%', '6.37%']arr2 = ['3.25%', '3.58%', '3.90%', '4.23%']}this.combinationLoan.zhs_interestRate_list = arr1;this.combinationLoan.zhs_interestRate = arr1[this.combinationLoan.zhs_interestRate_index];this.combinationLoan.zhg_interestRate_list = arr2;this.combinationLoan.zhg_interestRate = arr2[this.combinationLoan.zhg_interestRate_index];}},rage_picker(e, type) {if (this.loanType == '1') {//商贷利率this.commercialLoans.interestRate = e;this.commercialLoans.interestRate_index = this.commercialLoans.interestRate_list.findIndex((r) => {return r == e});} else if (this.loanType == '2') {//公积金利率this.accumulationFund.interestRate = e;this.accumulationFund.interestRate_index = this.commercialLoans.interestRate_index.findIndex((r) => {return r == e});} else if (this.loanType == '3') {if (type == 'commercialLoans_interestRate') {//组合贷商贷利率this.combinationLoan.zhs_interestRate = e;this.combinationLoan.zhs_interestRate_index = this.commercialLoans.zhs_interestRate_index.findIndex((r) => {return r == e});} else if (type == 'accumulationFund_interestRate') {//组合贷公积金利率this.combinationLoan.zhg_interestRate = e;this.combinationLoan.zhg_interestRate_index = this.commercialLoans.zhg_interestRate_index.findIndex((r) => {return r == e});}}},resetForm() {this.$refs['ruleForm1'].resetFields();this.$refs['ruleForm2'].resetFields();this.$refs['ruleForm3'].resetFields();this.commercialLoans.monthlySupply = 0;this.commercialLoans.grossInterest = 0;this.commercialLoans.totalRepayment = 0;this.accumulationFund.monthlySupply = 0;this.accumulationFund.grossInterest = 0;this.accumulationFund.totalRepayment = 0;this.combinationLoan.monthlySupply = 0;this.combinationLoan.grossInterest = 0;this.combinationLoan.totalRepayment = 0;}}})
</script><style scoped lang="scss">/*@import '~@/assets/main.scss';*/.load-card {display: flex;justify-content: space-around;}.flex-between {display: flex;justify-content: space-between;}.loan-rs {padding: 20px;min-width: 280px;font-size: 18px;.payment {font-size: 24px;font-weight: bold;}}
</style>

房贷计算js

calculatorForHouseLoan.js的代码，放在common目录下。

'use strict';/*** 等额本金、等额本息还款方式详细对比* 带有Ai后缀为等额本息还款方式，即average interest* 带有Ap后缀为等额本金还款方式，即average principal*/// 格式化金额，保留两位小数
const formatFloat = function (input, decimals) {let formatFloatNumb = Math.round(input * Math.pow(10, decimals)) / Math.pow(10, decimals);return formatFloatNumb.toFixed(decimals);
};// 涉及计算公式
const loanFormula = {// 等额本息每月还款金额getRepayPerMouPriceAi: function (loanTotal, interestRatePerMou, totalMouths) {/*** @param loanTotal         总贷款* @param interestRatePerMou   月利率* @param totalMouths            总月数* 每月还款金额 = [总贷款 × 月利率 × (1 + 月利率)^总月数] ÷ [(1 + 月利率)^总月数 - 1]*/// 简化公式，创建变量xlet x = Math.pow((1 + interestRatePerMou), totalMouths);return (loanTotal * interestRatePerMou * x / (x - 1));},// 等额本息第i个月还款中利息部分getRepayInterestPerMouAi: function (i, loanTotal, interestRatePerMou, totalMouths) {/*** @param i   第(i + 1)个月* 第i个月还款中利息部分 = 总贷款 × 月利率 × {(1 + 月利率)^i - (1 + 月利率)^总月数 * [(1 + 月利率)^i - 1] ÷ [(1 + 月利率)^总月数 - 1]}*/// 简化公式，创建变量x、ylet [x, y] = [Math.pow((1 + interestRatePerMou), i), Math.pow((1 + interestRatePerMou), totalMouths)];return (loanTotal * interestRatePerMou * (x - y * (x - 1) / (y - 1)));}
};const calculate = function (loanTotal, interestRatePerMou, totalMouths) {// 每月需还利息、本金、剩余待还本金、已还总金额let repayPerMouObj = {// 等额本息repayPerMouObjAi: {repayInterestPerMouArrAi: [], // 利息repayPrincipalPerMouArrAi: [], // 本金balanceArrAi: [], // 待还本金totalRepaidArrAi: [], // 月供累加()totalRepayPerMouArrAi: []},// 等额本金repayPerMouObjAp: {repayInterestPerMouArrAp: [],repayPerMouPriceArrAp: [],balanceArrAp: [],totalRepaidArrAp: [],totalRepayPerMouArrAp: []}};// 等额本息月均还本带息let repayPerMouAi = loanFormula.getRepayPerMouPriceAi(loanTotal, interestRatePerMou, totalMouths);// 等额本息初始化剩余待还本金let balancePerMouAi = loanTotal;// 等额本息初始化已还总金额let totalRepaidPerMouAi = 0;// 等额本金每月还款本金let repayPrincipalPerMouAp = loanTotal / totalMouths;// 等额本金每月还款递减金额let decreasePerMouAp = repayPrincipalPerMouAp * interestRatePerMou;// 等额本金初始化剩余待还本金let balancePerMouAp = loanTotal;// 等额本金初始化已还总金额let totalRepaidPerMouAp = 0;const getRepayPerMouObj = function () {for (let i = 0; i < totalMouths; i++) {// 等额本息第(i+1)个月需还利息let repayInterestPerMouAi = loanFormula.getRepayInterestPerMouAi(i, loanTotal, interestRatePerMou, totalMouths);// 等额本息第(i+1)个月需还本金：月均还本带息 - 利息部分let repayPrincipalPerMouAi = repayPerMouAi - repayInterestPerMouAi;// 等额本息第(i+1)个月待还本金：第i个月剩余待还本金 - 第(i + 1)个月所还本金，即上月剩余待还本金 - 当月已还本金balancePerMouAi = balancePerMouAi - repayPrincipalPerMouAi;// 等额本息第(i+1)个月已还总金额totalRepaidPerMouAi = totalRepaidPerMouAi + repayPerMouAi;// 等额本金第(i+1)个月若提前还款实际支付let totalRepayPerMouAi = balancePerMouAi + totalRepaidPerMouAi;// 拼接等额本息数组，包括各月份需还利息、本金及剩余待还本金repayPerMouObj.repayPerMouObjAi.repayInterestPerMouArrAi.push(formatFloat(repayInterestPerMouAi, 4));repayPerMouObj.repayPerMouObjAi.repayPrincipalPerMouArrAi.push(formatFloat(repayPrincipalPerMouAi, 4));repayPerMouObj.repayPerMouObjAi.balanceArrAi.push(formatFloat(balancePerMouAi, 4));repayPerMouObj.repayPerMouObjAi.totalRepaidArrAi.push(formatFloat(totalRepaidPerMouAi, 4));repayPerMouObj.repayPerMouObjAi.totalRepayPerMouArrAi.push(formatFloat(totalRepayPerMouAi, 4));// 等额本金第(i+1)个月需还利息// let repayInterestPerMouAp = loanTotal * interestRatePerMou * (1 - (i - 1) / totalMouths);let repayInterestPerMouAp = loanTotal * interestRatePerMou * (1 - (i - 0) / totalMouths);// 等额本金第(i+1)个月还本带息let repayPerMouPriceAp = repayPrincipalPerMouAp + repayInterestPerMouAp;// 等额本金第(i+1)个月剩余待还本金balancePerMouAp = balancePerMouAp - repayPrincipalPerMouAp;// 等额本金第(i+1)个月总还本带息totalRepaidPerMouAp = totalRepaidPerMouAp + repayPerMouPriceAp;// 等额本金第(i+1)个月若提前还款实际支付let totalRepayPerMouAp = balancePerMouAp + totalRepaidPerMouAp;// 拼接等额本金数组，包括各月份需还利息、本金及剩余待还本金repayPerMouObj.repayPerMouObjAp.repayInterestPerMouArrAp.push(formatFloat(repayInterestPerMouAp, 4));repayPerMouObj.repayPerMouObjAp.repayPerMouPriceArrAp.push(formatFloat(repayPerMouPriceAp, 4));repayPerMouObj.repayPerMouObjAp.balanceArrAp.push(formatFloat(balancePerMouAp, 4));repayPerMouObj.repayPerMouObjAp.totalRepaidArrAp.push(formatFloat(totalRepaidPerMouAp, 4));repayPerMouObj.repayPerMouObjAp.totalRepayPerMouArrAp.push(formatFloat(totalRepayPerMouAp, 4));}return repayPerMouObj;};getRepayPerMouObj();// 等额本息总还本带息： 月均还本带息 × 总月数let totalRepayAi = repayPerMouAi * totalMouths;// 等额本息总还款利息： 总还本带息 - 总贷款额let totalInterestAi = totalRepayAi - loanTotal;// 等额本金总还款金额（直接从等额本金数组中获取）const totalRepayPriceAp = repayPerMouObj.repayPerMouObjAp.totalRepaidArrAp[repayPerMouObj.repayPerMouObjAp.totalRepaidArrAp.length - 1];// 等额本金总还款利息： 总还本带息 - 总贷款额const totalInterestAp = totalRepayPriceAp - loanTotal;return {loanTotal: formatFloat(loanTotal, 0), //贷款总额totalInterestAi: formatFloat(totalInterestAi, 0), //等额本息总还款利息totalRepayAi: formatFloat(totalRepayAi, 0), //总还本带息repayPerMouAi: formatFloat(repayPerMouAi, 0), //等额本息月均还本带息totalInterestAp: formatFloat(totalInterestAp, 0), //等额本金总还款利息totalRepayPriceAp: formatFloat(totalRepayPriceAp, 0), //等额本金总还款金额//等额本金每月所还本金repayPrincipalPerMouAp: formatFloat(repayPrincipalPerMouAp, 0),//等额本金第一个月还款repayPerMouthAp: formatFloat(repayPerMouObj.repayPerMouObjAp.repayPerMouPriceArrAp[0], 0),//之后每个月递减额decreasePerMouAp: formatFloat(decreasePerMouAp, 0),//等额本息详情repayPerMouObjAi: repayPerMouObj.repayPerMouObjAi,//等额本金详情repayPerMouObjAp: repayPerMouObj.repayPerMouObjAp}};module.exports = {calculate: calculate
};

应用

<el-dialogtitle="房贷计算器":visible.sync="showCalculatorDialog"width="65%" :before-close="handleClose"><loan ref="loan"></loan>
</el-dialog>

handleClose(){this.$refs['loan'].resetForm();this.showCalculatorDialog = false;
},

vue+elementui 房贷计算器相关推荐

房贷计算器。在左侧输入数据，点击“开始计算”后，右侧右侧计算出结果后直接显示出来。
这是代码: <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF- ...
Java项目:角色权限后台脚手架系统(java+Springboot+Maven+myBaits-Plus+Vue+Element-UI+Mysql)
源码获取:博客首页 "资源" 里下载! Springboot框架+myBaits-Plus+MySQL实现的角色权限后台管理脚手架系统实战项目,实现的是所有系统最基础的后台管理功能 ...
关于vue+element-ui项目的分页，返回默认显示第一页的问题解决
关于vue+element-ui项目的分页,返回默认显示第一页的问题解决参考文章: (1)关于vue+element-ui项目的分页,返回默认显示第一页的问题解决 (2)https://www.cn ...
spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发
前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...
体验使用node.js创建vue+Element-UI项目
1.首先去node.js官网下载系统对应的node.js版本. 2.安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao. ...
Vue+ElementUI纯前端技术实现对表格数据的增删改查
Vue+ElementUI纯前端技术实现对表格数据的增删改查页面展示效果一.页面结构分为三个部分 head body 以及script 一般我个人是在head中引入一些组件库 , 还有一些样式 ...
Vue+element-ui 实现表格的分页功能示例
Vue+element-ui 实现表格的分页功能示例 template部分: <el-table:data="tempList":header-cell-style=&quo ...
element显示服务器的图片,Vue+ElementUI+SpringMVC实现图片上传和回显
Vue+ElementUI+SpringMVC实现图片上传和table回显而我们也常遇到表单中包含图片上传的需求,并且需要在table中显示图片,所以这里我就讲一下结合后端的SpringMVC框架如 ...
vue+elementui 中src动态加载图片的时候不起作用
vue+elementui 中src动态加载图片的时候不起作用代码如下: <el-table-column align="center" label="宠物图片& ...
Vue+ElementUI+SpringMVC实现图片上传和回显
Vue+ElementUI+SpringMVC实现图片上传和table回显在之前我们已经讲过了 Vue+ElementUI+SpringMVC实现分页 . 而我们也常遇到表单中包含图片上传的需求,并 ...

vue+elementui 房贷计算器

loan房贷计算组件

房贷计算js

应用

vue+elementui 房贷计算器相关推荐

最新文章

热门文章