【vue 基础】房贷计算器案例（无样式）

企业开发 2023-06-04 23:41:18 阅读次数: 0

1. 实现计算公积金贷款和商业贷款实际利率的功能

<!DOCTYPE html>
<html lang="en">

<head>
    <script type="text/javascript" src="../js/vue.js"></script>
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
</head>

<body>
    <div id="root">
        <div>
            <label>贷款方式</label>
            <select v-model="selected_LoanMethod" @change="CalculateRate">
                <option value="0">商业贷款</option>
                <option value="1">公积金贷款</option>
            </select>
        </div>

        <div>
            <label>贷款年限</label>
            <select v-model="selected_LoanYear" @change="CalculateRate">
                <option v-for="(year, index) in 30" :value="year">{
   
   {year}}年</option>
            </select>
        </div>

        <div>
            <label>贷款利率</label>
            <select v-model="selected_Rate">
                <option v-for="(item, index) in rateDetail" :value="item.value">{
   
   {item.text}}</option>
            </select>
            <label>{
   
   {selected_Rate}}%</label>
        </div>

        <div>
            <label>还款方式</label>
            <select v-model="RepaymentMethod">
                <option value="0">等额本金</option>
                <option value="1">等额本息</option>
            </select>
        </div>

        <div>
            <label>贷款金额</label>
            <input type="number" v-model="LoanMoney">万
        </div>

        <div>
            <button @click="">开始计算</button>
        </div>
    </div>

    <script>
        const GJJ_GT_5 = 3.25 //公积金贷款5年以上的贷款利率
        const GJJ_LT_5 = 2.75 //公积金贷款5年以下的贷款利率
        const SY_GT_5 = 4.90 //商业贷款5年以上的贷款利率
        const SY_LT_5 = 4.75 //商业贷款5年以下的贷款利率

        let vm = new Vue({
            el: '#root',
            data: {
                RepaymentMethod: "0", //还款方式
                selected_LoanMethod: "0", //贷款方式
                selected_LoanYear: "10", //贷款年限
                selected_Rate: "", //贷款利率
                LoanMoney: "0", //贷款金额
                rateDetail: [], //利率详情
            },
            created: function () {
                this.CalculateRate()
            },
            methods: {
                CalculateRate: function () { //计算利率
                    this.rateDetail = []
                    let basicRate; //定义基准利率
                    if (this.selected_LoanMethod == "0") { //如果贷款方式是商业贷款
                        if (this.selected_LoanYear <= 5) { //如果贷款年限小于等于5
                            basicRate = SY_LT_5
                        } else {
                            basicRate = SY_GT_5
                        }

                        //设置利率
                        this.rateDetail.push({
                            text: "基准利率",
                            value: parseFloat((1 * basicRate).toFixed(2))
                        }, {
                            text: "7折利率",
                            value: parseFloat((0.7 * basicRate).toFixed(2))
                        }, {
                            text: "8折利率",
                            value: parseFloat((0.8 * basicRate).toFixed(2))
                        }, {
                            text: "8.3折利率",
                            value: parseFloat((0.83 * basicRate).toFixed(2))
                        }, {
                            text: "8.5折利率",
                            value: parseFloat((0.85 * basicRate).toFixed(2))
                        }, {
                            text: "8.8折利率",
                            value: parseFloat((0.88 * basicRate).toFixed(2))
                        }, {
                            text: "9折利率",
                            value: parseFloat((0.9 * basicRate).toFixed(2))
                        }, {
                            text: "9.5折利率",
                            value: parseFloat((0.95 * basicRate).toFixed(2))
                        }, {
                            text: "1.05倍利率",
                            value: parseFloat((1.05 * basicRate).toFixed(2))
                        }, {
                            text: "1.1倍利率",
                            value: parseFloat((1.1 * basicRate).toFixed(2))
                        })

                    } else if (this.selected_LoanMethod == "1") {
                        if (this.selected_LoanYear <= 5) {
                            basicRate = GJJ_LT_5
                        } else {
                            basicRate = GJJ_GT_5
                        }

                        //设置利率
                        this.rateDetail.push({
                            text: "基准利率",
                            value: basicRate
                        }, {
                            text: "1.1倍率",
                            value: parseFloat((basicRate * 1.1).toFixed(2))
                        })
                    }
                    this.selected_Rate = basicRate //设置下拉框的默认值
                },
                CalculateDetail: function () { //计算还款明细
                    alert()
                }
            }


        })
    </script>
</body>

</html>

2. 实现计算还款明细的功能

 完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <script type="text/javascript" src="../js/vue.js"></script>
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
</head>

<body>
    <div id="root">
        <div>
            <label>贷款方式</label>
            <select v-model="selected_LoanMethod" @change="CalculateRate">
                <option value="0">商业贷款</option>
                <option value="1">公积金贷款</option>
            </select>
        </div>

        <div>
            <label>贷款年限</label>
            <select v-model="selected_LoanYear" @change="CalculateRate">
                <option v-for="(year, index) in 30" :value="year">{
   
   { year }}年</option>
            </select>
        </div>

        <div>
            <label>贷款利率</label>
            <select v-model="selected_Rate">
                <option v-for="(item, index) in rateDetail" :value="item.value">{
   
   { item.text }}</option>
            </select>
            <label>{
   
   { selected_Rate }}%</label>
        </div>

        <div>
            <label>还款方式</label>
            <select v-model="RepaymentMethod">
                <option value="0">等额本金</option>
                <option value="1">等额本息</option>
            </select>
        </div>

        <div>
            <label>贷款金额</label>
            <input type="number" v-model="LoanMoney" />万
        </div>

        <div>
            <button @click="CalculateDetail">开始计算</button>
        </div>
        {
   
   {RepaymentDetails}}
    </div>

    <script>
        const GJJ_GT_5 = 3.25 //公积金贷款5年以上的贷款利率
        const GJJ_LT_5 = 2.75 //公积金贷款5年以下的贷款利率
        const SY_GT_5 = 4.9 //商业贷款5年以上的贷款利率
        const SY_LT_5 = 4.75 //商业贷款5年以下的贷款利率

        let vm = new Vue({
            el: '#root',
            data: {
                RepaymentMethod: '0', //还款方式
                selected_LoanMethod: '0', //贷款方式
                selected_LoanYear: '10', //贷款年限
                selected_Rate: '', //贷款利率
                LoanMoney: '0', //贷款金额
                rateDetail: [], //利率详情
                RepaymentDetails: [], //还款明细
            },
            created: function() {
                this.CalculateRate()
            },
            methods: {
                CalculateRate: function() {
                    //计算利率
                    this.rateDetail = []
                    let basicRate //定义基准利率
                    if (this.selected_LoanMethod == '0') {
                        //如果贷款方式是商业贷款
                        if (this.selected_LoanYear <= 5) {
                            //如果贷款年限小于等于5
                            basicRate = SY_LT_5
                        } else {
                            basicRate = SY_GT_5
                        }

                        //设置利率
                        this.rateDetail.push({
                            text: '基准利率',
                            value: parseFloat(
                                (1 * basicRate).toFixed(2)
                            )
                        }, {
                            text: '7折利率',
                            value: parseFloat(
                                (0.7 * basicRate).toFixed(2)
                            )
                        }, {
                            text: '8折利率',
                            value: parseFloat(
                                (0.8 * basicRate).toFixed(2)
                            )
                        }, {
                            text: '8.3折利率',
                            value: parseFloat(
                                (0.83 * basicRate).toFixed(2)
                            )
                        }, {
                            text: '8.5折利率',
                            value: parseFloat(
                                (0.85 * basicRate).toFixed(2)
                            )
                        }, {
                            text: '8.8折利率',
                            value: parseFloat(
                                (0.88 * basicRate).toFixed(2)
                            )
                        }, {
                            text: '9折利率',
                            value: parseFloat(
                                (0.9 * basicRate).toFixed(2)
                            )
                        }, {
                            text: '9.5折利率',
                            value: parseFloat(
                                (0.95 * basicRate).toFixed(2)
                            )
                        }, {
                            text: '1.05倍利率',
                            value: parseFloat(
                                (1.05 * basicRate).toFixed(2)
                            )
                        }, {
                            text: '1.1倍利率',
                            value: parseFloat(
                                (1.1 * basicRate).toFixed(2)
                            )
                        })
                    } else if (this.selected_LoanMethod == '1') {
                        if (this.selected_LoanYear <= 5) {
                            basicRate = GJJ_LT_5
                        } else {
                            basicRate = GJJ_GT_5
                        }

                        //设置利率
                        this.rateDetail.push({
                            text: '基准利率',
                            value: basicRate
                        }, {
                            text: '1.1倍率',
                            value: parseFloat(
                                (basicRate * 1.1).toFixed(2)
                            )
                        })
                    }
                    this.selected_Rate = basicRate //设置下拉框的默认值
                },
                CalculateDetail: function() { //计算还款明细
                    this.RepaymentDetails = []

                    let LoanMoney = this.LoanMoney * 10000 //贷款金额、本金（单位：元）
                    let LoanMonth = this.selected_LoanYear * 12 //贷款的月数

                    let month_rate = (this.selected_Rate * 0.01) / 12 //月利率

                    if (this.RepaymentMethod == '0') { //等额本金
                        let payable_bj_month = LoanMoney / LoanMonth //每月应还本金=本金/(贷款年限*12)

                        let payed_bj = 0 //已还本金初始为0
                        for (let i = 1; i <= LoanMonth; i++) {
                            let payable_lx_month = (LoanMoney - payed_bj) * month_rate //每月应还的利息 = (本金-已还本金)*月利率
                            let payable_total_month = payable_bj_month + payable_lx_month //每月月供=每月应还本金 + 每月应还的利息
                            payed_bj = payed_bj + payable_bj_month //已还本金=累计的已还本金+每月应还本金

                            let RepaymentDetails_month = {}
                            RepaymentDetails_month["月数"] = i
                            RepaymentDetails_month["每月月供"] = payable_total_month
                            RepaymentDetails_month["当月累计已还本金"] = payed_bj
                            RepaymentDetails_month["每月应还的利息"] = payable_lx_month
                            this.RepaymentDetails.push(RepaymentDetails_month)
                        }
                    } else { //等额本息
                        let payable_total_month = (LoanMoney * month_rate * Math.pow(1 + month_rate, LoanMonth)) / (Math.pow(1 + month_rate, LoanMonth) - 1) //每月月供=[本金*月利率*(1+月利率)^贷款月数]/[(1+月利率)^贷款年限-1]
                        let payed_bj = 0 //已还本金，初始为0
                        for (let i = 1; i <= LoanMonth; i++) {
                            let payable_lx_month = (LoanMoney - payed_bj) * month_rate //每月利息=（本金-已还本金）*月利率
                            payable_bj_month = payable_total_month - payable_lx_month //每月应还本金=每月月供-每月利息
                            payed_bj = payed_bj + payable_bj_month //已还本金=累计的已还本金+每月应还本金

                            let RepaymentDetails_month = {}
                            RepaymentDetails_month["月数"] = i
                            RepaymentDetails_month["每月月供"] = payable_total_month
                            RepaymentDetails_month["当月累计已还本金"] = payed_bj
                            RepaymentDetails_month["每月应还的利息"] = payable_lx_month
                            this.RepaymentDetails.push(RepaymentDetails_month)
                        }

                    }
                }
            }
        })
    </script>
</body>

</html>

测试结果：

猜你喜欢

转载自blog.csdn.net/ChaoChao66666/article/details/130729342
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022