Heim  >  Fragen und Antworten  >  Hauptteil

Wie rechnet man den Währungsbetrag in VueJS in Cent um?

Ich möchte einen Währungswert, der wie 5 $ oder 5,12 $ aussieht, sicher in einen Wert in Cent umrechnen können, der 500 bzw. 512 beträgt.

new Vue({
  el: "#app",
  data: {
    price: 5.1
  },
  computed: {
    amount() {
      return (this.price * 100);
    }
  },
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">

  <label>总金额(格式化)<br>
<input v-model="price"></label>
  </label>

  <p>

    <label>总金额(以分为单位){{ amount }}<br>
<input v-model.number="amount" name="amount" required type="number"></label>
</div>

Mir ist aufgefallen, dass ein Wert wie „5,10“ möglicherweise nicht vollständig in einen Cent-Wert umgerechnet werden kann.

Ich möchte auch vermeiden, dass Leute Werte wie 5,1 und 5,12345 eingeben, da es sich dabei eigentlich nicht um Währungen handelt. Die Punkte sollten zweistellig sein, oder?

Bitte geben Sie Tipps, um kostspielige Fehler zu vermeiden.

P粉055726146P粉055726146226 Tage vor460

Antworte allen(1)Ich werde antworten

  • P粉573809727

    P粉5738097272024-03-29 00:37:49

    首先,你可以使用Math.round将分数四舍五入到最近的整数

    此外,为了检测输入的值是否超过2位小数,可以监视该值并进行检查

    new Vue({
      el: "#app",
      data: {
        price: 5.1
      },
      computed: {
        amount() {
          return Math.round(this.price * 100);
        }
      },
      watch: {
        price(newPrice, oldPrice) {
          if (String(newPrice).split('.')[1]?.length > 2) {
            alert('不应输入超过2位小数的数字')
            this.price = oldPrice
          }
        }
      }
    })
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
    <div id="app">
    
      <label>总金额(格式化)<br>
    <input v-model="price"></label>
      </label>
    
      <p>
    
        <label>总金额(分){{ amount }}<br>
    <input v-model.number="amount" name="amount" required type="number"></label>
    </div>

    Antwort
    0
  • StornierenAntwort