<html>
  <div id="loan_simulation">
    <h2>住宅ローンシミュレーション</h2>
    <div id="app">
      <p><span>物件価格：</span>{{ price.toLocaleString() }} <span>万円</span></p>
      <input type="range" id="price" name="price" v-model.number="price" min="0" max="8000" step="10">
      <p><span>頭金：</span>{{ downpayment.toLocaleString() }} <span>万円</span></p>
      <input type="range" id="downpayment" name="downpayment"  v-model.number="downpayment" min="0" :max="8000" step="10" key="price">
      <p><span>ローン金利：</span>{{ interestrate.toFixed(2) }} <span>%</span></p>
      <input type="range" id="interestrate" name="interestrate"  v-model.number="interestrate" min="0.0" max="5.0" step="0.05">
      <p><span>住宅ローン借入期間：</span>{{ paybackperiod }} <span>年</span></p>
      <input type="range" id="paybackperiod" name="paybackperiod"  v-model.number="paybackperiod" min="1" max="35" step="1">
      <hr style="margin: 15px 0;" />
      <h3>シミュレーション結果</h3>
      <p><span>住宅ローン借入金額：</span>{{ loanamount.toLocaleString() }} <span>万円</span></p>
      <p><span>毎月の支払額：</span>{{ monthlypayment.toLocaleString() }} <span>円</span></p>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</html>

* { margin: 0; padding: 0; }
body { background-color: #FFFAE4; font-size: 16px; }
#loan_simulation { width: 600px; max-width: 80%; margin: 0 auto; padding: 20px 20px 10px 20px; text-align: center; margin-bottom: 10px; }
#loan_simulation h2 { font-size: 1.3em; font-weight: bold; margin-bottom: 20px; }
#loan_simulation h3 { font-size: 1.1em; font-weight: bold; margin-bottom: 15px; }
#loan_simulation  input { width: 100%; margin: 5px; }
#loan_simulation  p { margin: 5px; font-size: 1.5em; }
#loan_simulation p span { font-size: 0.7em; }

var app = new Vue({
  el: '#app',
  data: {
    price: 5000,
    downpayment: 0,
    interestrate: 1.0,
    paybackperiod: 35
  },
  watch: {
    price: function() {
      this.downpayment = this.downpayment <= this.price ? this.downpayment : this.price
    },
    downpayment: function() {
      this.downpayment = this.downpayment <= this.price ? this.downpayment : this.price
    }
  },
  computed: {
    loanamount: function() {
      return this.price - this.downpayment
    },
    monthlypayment: function() {
      numberofpayments = this.paybackperiod * 12
      monthlyinterestrate = this.interestrate / 12
      u = (this.loanamount * (monthlyinterestrate / 100) * (1 + (monthlyinterestrate / 100)) ** numberofpayments)
      d = ((1 + (monthlyinterestrate / 100)) ** numberofpayments) - 1
      return  Number(((u / d) * 10000).toFixed(0))
    },
    firstmonthinterest: function() {
      monthlyinterestrate = this.interestrate / 12
      return Number((this.loanamount * monthlyinterestrate * 100).toFixed(0))
    }
  }
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.