Vue.Js 2输入格式编号

时间:2018-11-22 01:09:30

标签: input vuejs2 numbers format vue-component

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

将一些视图逻辑从asp.net核心2迁移到vue,我正在使用它:

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

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

我需要一种以美式格式和2个小数位(1,000,000.21)格式化数字输入的方法,但是当模型值为零或为空时什么也不显示。
vue-numeric可以执行 ALMOST 的所有操作,但是当我尝试使用占位符时对我来说却失败了。

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

我尝试使用占位符作为空格,因为当我使用空字符串时空格会崩溃。 如果输入零或为空,则本示例显示0.00。我尝试过使用输出类型空值道具。

我不喜欢使用vue-数字,但是它很方便,因为我不知道更方便的解决方案。

1 个答案:

答案 0 :(得分:0)

您只需使用computed属性和单独的gettersetter即可实现格式化,而无需其他依赖项。

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

我仅以小数点分隔符为例,您必须在设置器中添加,千位分隔符以实现全部功能。