javascript - 如何让 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() :

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@2"></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> )。

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

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@2"></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() 来完成。 .