如何让 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 的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>中格式化(。

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

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()来完成。

Answer 2

使用

vuex 作为存储，我这样做的方法是使用带有 getter 和 setter 的双向计算属性。

getter 将数据(浮点数(从存储中取出，并将其显示在格式化为 .toLocalString(( 的输入字段中。

setter 将输入作为本地格式的字符串，并将 (.replace(( ( 的点替换为 " 和逗号替换为 "." - 完成后，需要将字符串解析为 float ( parseFloat(string( (，然后将调度更新存储的操作。