如何让 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

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

所以数字 like1.100,60是1100.60刚刚在不同语言环境中打印的数字。

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

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

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

使用格式化 <input>

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

幸运的是，快速搜索带来了一个似乎适合这份工作的内容：

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

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

同样，该组件只是更改了输入字段。数字仍然只是一个数字，“打印”仍然必须使用.toLocaleString().