如何在Vue 2中为数字设置2位固定小数位

Question

我正在使用

v-model.number

来绑定数据属性，这是片段

new Vue({
  el: "#app",
  data: {
    entries: [{
        text: "Rate 1",
        rate: 1.7
      },
      {
        text: "Rate 2",
        rate: 2.00
      },
      {
        text: "Rate 3",
        rate: 3.50
      }
    ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.js"></script>
<div id="app">
  <div v-for="(entry,index) in entries">
    <h2>{{ entry.text }}</h2>
    <input type="number" step="0.01" class="form-control" v-model.number="entry.rate">
  </div>
</div>

我一直坚持用 2 个固定小数设置十进制值，例如3.5 相当于 3.50，2 相当于 2.00

Answer 1

您可以将事件侦听器绑定到字段更新 (

input

)，并在初始化和更改时格式化数字

new Vue({
  el: "#app",
  data: {
    entries: [
      { text: "Rate 1", rate: 1.7 },
      { text: "Rate 2", rate: 2.00 },
      { text: "Rate 3", rate: 3.50 }
    ]
  },
  methods: {
    formatRate(value) {
      return parseFloat(value).toFixed(2);
    },
    updateRate(index, event) {
      // Update when the user changes the input
      this.entries[index].rate = parseFloat(event.target.value);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.10/vue.js"></script>
<div id="app">
  <div v-for="(entry, index) in entries">
    <h2>{{ entry.text }}</h2>
    <input type="number" step="0.01" class="form-control"
           :value="formatRate(entry.rate)"
           @input="updateRate(index, $event)">
  </div>
</div>