Input Vue.Js 2输入格式编号

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

将一些视图逻辑从asp.net core 2迁移到vue，我使用的是：

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

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

我需要一种使用US格式和2个小数位（1000000.21）格式化数字输入的方法，但当模型值为零或为空时不显示任何内容。
vue numeric几乎可以执行所有操作，但在尝试使用占位符时失败

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

我尝试使用空格作为占位符，因为使用空字符串时占位符会崩溃。 如果输入零或空，此示例显示0.00。我试着玩输出类型和空值道具

---

我并不热衷于vue numeric，但它很方便，因为我不知道有什么更方便的解决方案。

您只需使用

computed

属性和单独的

getter

和

setter

即可实现格式设置，而不需要其他依赖项

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;
      }
    }
  }
}

---

我只添加了十进制分隔符作为示例，您必须在setter中添加

，

千位分隔符才能实现全部功能。

尝试一下，它有很多选项，包括currency我遵循了这个建议，但它不能完全满足我的需要，立即计算属性setter集），我需要的东西只能在

更改输入的
时格式化。我还找到了js中内置的方便的
Number.prototype.toLocaleString（）
方法。现在我使用的是一种方法，因为idk是一种让计算属性只在
change
event时更新的方法。你不能让计算属性只在更改时更新，计算值的整个要点是反映它所依赖/计算的值中的任何更改。但是，您可以在
change
上简单地将格式化作为方法调用调用（即，不要使用计算属性，使用方法格式化和简单的
v-model
）。