javascript - Vuejs : input auto filled

Question

在下面的 Vue JS 代码中，我输入了总价和两个输入付费和百分比，我想做一个算法用户在paid输入中写入的自动百分比应填写在percentage输入中，ofc该百分比来自总价输入，当用户写入时也是如此在百分比输入中，付费应自动填充，依此类推。

有没有办法在 Vue js 中做到这一点？

P.S:我编写了 v-model=instpaid 和 v-model=instprice 将数据发布到 API

<input type="number" v-model="instPrice" class="price-input mt-3" placeholder=" total price" required />
<br />
<input type="number" v-model="instPaid" class="price-input mt-3"                                                                placeholder=" paid " required />
<input type="number"  class="price-input mt-3" placeholder=" percenatge"                                                                  required />

Answer 1

也许类似于以下代码片段:

new Vue({
  el: "#demo",
  data() {
    return {
      instPrice: 0,
      instPaid: 0,
      pct: 0
    }
  },
  methods: {
    calc(pct) {
      pct === true ?
        this.instPaid = (this.instPrice / 100 * this.pct).toFixed(2)
      :
        this.pct = (this.instPaid / this.instPrice * 100).toFixed(2)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <input type="number" v-model="instPrice" placeholder=" total price" required />
  <br />
  <input type="number" v-model="instPaid" placeholder=" paid" @keyup="calc(false)" required />
  <input type="number" placeholder=" percenatge" @keyup="calc(true)" v-model="pct" required />
</div>