Vue.js将价值显示为价格，但保留为int

Question

我有一个名为“formatted-number”的vue组件，它接收一个int值（1234）并将其当前更改为一个字符串（“12.34”），以便它显示为一个文本框中的价格（带“，”或“。”，取决于国家）。

我想保留该值作为一个整数，只是将其显示为一个价格，以便我们的用户可以编辑“字符串价格”，但它也更新了背景中的int值。

有人有线索我怎么能管理这个？

下面是当前的代码：

Vue.component('formattedNumber', { 
    props: ['value', 'abs'], 
    template: '<input type="text" :value="value" autocomplete="off" @blur="updateNumber($event.target.value)" ref="input">', 
    mounted: function() { 
     this.updateNumber(this.value/100); 
    }, 
    methods: { 
     separators: function() { 
      var comparer = new Intl.NumberFormat(navigator.language).format(10000/3); 

      return { 
       thousandSeparator: comparer[1], 
       decimalSeparator: comparer[5] 
      }; 
     }, 
     unformat: function (number) { 
      var separators = this.separators(); 

      var result = number 
       .toLocaleString(navigator.language) 
       .replace(separators.thousandSeparator, '') 
       .replace(/[^\d.,-]/g, '') 
       .replace(separators.decimalSeparator, '.'); 

      return this.abs ? Math.abs(Number(result)) : this.Number(result); 
     }, 
     updateNumber: function (value) { 
      this.$emit('input', new Intl.NumberFormat(
       navigator.language, 
       {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(this.unformat(value) 
      )); 
     } 
    } 
}); 

Answer 1

创建一个过滤器：docs。

过滤器只会改变html输出并保持原样。