vue写一个等额本息计算器

以下是一个简单的 Vue 等额本息计算器的代码示例：

<template>
  <div>
    <h2>等额本息计算器</h2>
    <form>
      <div>
        <label for="loanAmount">贷款金额：</label>
        <input type="number" id="loanAmount" v-model="loanAmount" />
      </div>
      <div>
        <label for="loanTerm">贷款期限（月）：</label>
        <input type="number" id="loanTerm" v-model="loanTerm" />
      </div>
      <div>
        <label for="interestRate">年利率（%）：</label>
        <input type="number" id="interestRate" v-model="interestRate" />
      </div>
      <button type="button" @click="calculate">计算</button>
    </form>
    <div v-if="monthlyPayment">
      <h3>每月还款金额：{{ monthlyPayment.toFixed(2) }}</h3>
      <h3>总利息：{{ totalInterest.toFixed(2) }}</h3>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loanAmount: 0,
      loanTerm: 0,
      interestRate: 0,
      monthlyPayment: null,
      totalInterest: null,
    };
  },
  methods: {
    calculate() {
      const monthlyInterestRate = this.interestRate / 12 / 100;
      const monthlyPayment =
        (this.loanAmount *
          monthlyInterestRate *
          Math.pow(1 + monthlyInterestRate, this.loanTerm)) /
        (Math.pow(1 + monthlyInterestRate, this.loanTerm) - 1);
      this.monthlyPayment = monthlyPayment;
      this.totalInterest = monthlyPayment * this.loanTerm - this.loanAmount;
    },
  },
};
</script>

这个计算器使用了 Vue 的双向绑定来获取用户输入的贷款金额、贷款期限和年利率，并在用户点击“计算”按钮时计算每月还款金额和总利息，并将结果显示在页面上。