vue写一个等额本金计算器
时间: 2023-05-12 11:07:01 浏览: 92
以下是一个简单的 Vue 等额本金计算器的代码示例:
```
<template>
<div>
<h1>等额本金计算器</h1>
<form>
<label>贷款金额:</label>
<input type="number" v-model="loanAmount" required><br>
<label>贷款期限(年):</label>
<input type="number" v-model="loanTerm" required><br>
<label>年利率:</label>
<input type="number" v-model="interestRate" required><br>
<button type="submit" @click.prevent="calculatePayments">计算</button>
</form>
<div v-if="payments.length">
<h2>还款计划表</h2>
<table>
<thead>
<tr>
<th>期数</th>
<th>本金</th>
<th>利息</th>
<th>月供</th>
<th>剩余本金</th>
</tr>
</thead>
<tbody>
<tr v-for="(payment, index) in payments" :key="index">
<td>{{ payment.period }}</td>
<td>{{ payment.principal }}</td>
<td>{{ payment.interest }}</td>
<td>{{ payment.monthlyPayment }}</td>
<td>{{ payment.remainingBalance }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
export default {
data() {
return {
loanAmount: null,
loanTerm: null,
interestRate: null,
payments: []
}
},
methods: {
calculatePayments() {
const monthlyInterestRate = this.interestRate / 12 / 100;
const totalPayments = this.loanTerm * 12;
const monthlyPrincipal = this.loanAmount / totalPayments;
let remainingBalance = this.loanAmount;
for (let i = 1; i <= totalPayments; i++) {
const interest = remainingBalance * monthlyInterestRate;
const principal = monthlyPrincipal;
const monthlyPayment = interest + principal;
remainingBalance -= principal;
this.payments.push({
period: i,
principal: principal.toFixed(2),
interest: interest.toFixed(2),
monthlyPayment: monthlyPayment.toFixed(2),
remainingBalance: remainingBalance.toFixed(2)
});
}
}
}
}
</script>
```
这个计算器使用了 Vue 的双向数据绑定来获取用户输入的贷款金额、贷款期限和年利率。当用户点击“计算”按钮时,它会计算出每个月的还款金额、本金、利息和剩余本金,并将这些信息显示在一个表格中。