如何在vuejs输入字段中将值显示为小数位？

Question

我试图在vuejs中的输入字段中显示2000.00，但它剥离了.00。

<div id="app">
   <input
    class="form-control"
    type="number"
    v-model="solicitorsFees"/>
</div>

new Vue({
  el: "#app",
  data: {
   solicitorsFees: 2000.00,
  },
})

如何使输入字段显示2000.00？

jsfiddle

我可以使用计算属性来做到这一点。但是我需要将其应用于多个输入字段。

solicitorsFeesDecimal: function(){
  return(this.solicitorsFees.toFixed(2))
},

 

<input class="form-control" type="number" v-model="solicitorsFeesDecimal"/>

解决方案：

<input class="form-control" type="number" :value="(this.solicitorsFees).toFixed(2)"/>

Answer 1

您应该进入输入字段：

<input type="number" v-model="solicitorsFees" step="0.01">

Answer 2

这就解决了问题：

<input class="form-control" type="number" :value="(this.solicitorsFees).toFixed(2)"/>

Answer 3

合适的解决方案是使用一个带有自定义getter和setter的computed属性，以及使用v-model。数字修改器：

样板

<div id="app">
   <input
    class="form-control"
    type="number"
    v-model.number="solicitorsFeesDisplay"/>
</div>

剧本

new Vue({
  el: "#app",
  computed: {
    solicitorsFeesDisplay: {
      get: function() {
        return this.solicitorsFees.toFixed(2)
      },
      set: function(newValue) {
        this.solicitorsFees = newValue
      }
    }
  },
  data() {
    return {
      solicitorsFees: 2000.00
    }
  },
})

请参阅CodeSandbox上的工作示例。