如何使VueJS了解本地化数字？

Question

让我们看一个简单的和应用程序。两个输入，a和b以及c结果。

我们有这个标记

<div id="app">
<input v-model.number="v1">
<input v-model.number="v2">
{{v3}}
</div>

和这个Vue脚本

var vm = new Vue ({
    el: "#app",
       data: {
        a:0,
        b:0,
    },        
    computed: {
     c:function(){
            return this.a + this.b; 
        }
    }
})

除了我正在使用本地化数字之外，这很有效。这意味着。用逗号“，”代替点“。”而点而不是逗号。

输入带小数位的数字会使vue混淆，并且无法正确计算总和。

为了使VueJS能够理解本地化的数字输入并使它们得到正确的总和，我该怎么做？

例如在pt-BR语言环境中：1.000,30 + 100,30 = 1.100,60

Answer 1

嗯，首先，一个数字只是一个数字。在内部，.将始终是小数点分隔符。

因此1.100,60之类的数字是1100.60只是打印在不同的区域设置中。

要打印它，只需使用 JavaScript's Number#toStringLocale() ：

＆＃13;

＆＃13;

var vm = new Vue({
  el: "#app",
  data: {
    a: 1110.12,
    b: 10000.11,
  },
  computed: {
    c: function() {
      return this.a + this.b;
    }
  }
})

＆＃13;

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <input v-model.number="a">
  <input v-model.number="b">
  <hr>
  Browser's locale: {{c.toLocaleString()}}<br>
  en-US locale: {{c.toLocaleString('en-US')}}<br>
  pt-BR locale: {{c.toLocaleString('pt-BR')}}<br>
</div>

＆＃13;

＆＃13;

＆＃13;

使用格式化的<input>

现在，如果您希望<input>获取本地化数字，这不是特定于Vue的问题，而是一般的JavaScript和浏览器。这意味着您必须找到实现所需行为的自定义组件（在<input>中进行格式化）。

幸运的是，快速搜索brings one that seems to to the job：

＆＃13;

＆＃13;

Vue.use(VueNumeric.default)
var vm = new Vue({
  el: "#app",
  data: {
    a: 1110.12,
    b: 10000.11,
  },
  computed: {
    c: function() {
      return this.a + this.b;
    }
  }
})

＆＃13;

<script src="https://unpkg.com/accounting-js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-numeric"></script>

<div id="app">
  Formatted inputs:
  <vue-numeric currency="R$" separator="," precision="2" v-model="a"></vue-numeric>
  <vue-numeric currency="$" separator="." precision="2" v-model="b"></vue-numeric>
  <hr>
  Browser's locale: {{c.toLocaleString()}}<br>
  en-US locale: {{c.toLocaleString('en-US')}}<br>
  pt-BR locale: {{c.toLocaleString('pt-BR')}}<br>
</div>

＆＃13;

＆＃13;

＆＃13;

同样，组件只是更改输入字段。这个数字仍然只是一个数字和＆＃34;打印＆＃34;仍然需要使用.toLocaleString()完成。