input - Vue.Js 2 输入格式化数字

Question

我一直在努力获取数字输入以使用 vuejs2 格式化数字。

将一些 View 逻辑从 asp.net core 2 迁移到 vue，我正在使用它:

<input asp-for="Model.LoanAmount" value="@(Model.LoanAmount > 0 ? Model.LoanAmount.ToString("N2") : String.Empty)" >

但这需要我在输入更改时重新加载该 View 。

我需要一种方法来将数字输入格式化为美国格式和 2 位小数 (1,000,000.21)，但当模型值为零或空时不显示任何内容。
vue-numeric 做几乎所有事情，但当我尝试使用占位符时对我来说失败了。

<vue-numeric v-model="vm.loanAmount" seperator="," placeholder=" " :precision="2" ></vue-numeric> 

我尝试使用空格作为占位符，因为当我使用空字符串时它会崩溃。 如果输入零或空，则此示例显示 0.00。我尝试使用 output-type 和 empty-value Prop 。

我不喜欢 vue-numeric 但它很方便，因为我不知道有更方便的解决方案。

Answer 1

您可以通过简单地使用具有单独的 getter 和 setter 的 computed 属性来实现格式化，而无需其他依赖项。

computed: {
  formattedValue: {
    get: function() {
      return this.value;
    },
    set: function(newValue) {
      if (newValue.length > 2) {
        newValue = newValue.replace(".", "");
        this.value =
          newValue.substr(0, newValue.length - 2) +
          "." +
          newValue.substr(newValue.length - 2);
      } else {
        this.value = newValue;
      }
    }
  }
}

https://codesandbox.io/s/p7j447k7wq

我只是作为示例添加了小数点分隔符，您必须在 setter 中添加 , 千位分隔符才能获得全部功能。