Vue.Js 2 输入格式化数字

Posted 2023-02-23

【中文标题】Vue.Js 2 输入格式化数字

【英文标题】：Vue.Js 2 Input formatting number

【发布时间】：2019-04-24 15:26:31

【问题描述】：

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

将一些视图逻辑从 asp.net core 2 迁移到 vue，我正在使用这个：

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

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

我需要一种方法来格式化具有美国格式和 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 道具。

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

【问题讨论】：

试试vue-cleave-component它有很多选择，包括货币

【参考方案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 中添加 , 千位分隔符才能获得全部功能。

【讨论】：

我遵循了这个建议，但它并没有完全满足我的需要，计算的属性设置器立即设置），我需要一些只能在输入的change 上格式化的东西。我还发现了 js 内置的方便的 Number.prototype.toLocaleString() 方法。现在我正在使用一种方法，因为 idk 是一种获取计算属性的方法，仅在 change 事件上更新

您不能让计算属性仅在更改时更新，计算值的全部意义在于反映它所依赖/计算的值的任何更改。但是，您可以简单地将格式设置为对 change 的方法调用（即，不要使用计算属性，使用方法来格式化和简单的 v-model）。