关于javascript：如何使VueJS理解本地化数字？

How make VueJS understand localized numbers?

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

我们有这个标记

1
2
3

<input v-model.number="v1">
<input v-model.number="v2">
{{v3}}

还有这个Vue脚本

1
2
3
4
5
6
7
8
9
10
11
12

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

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

因此，像1.100,60这样的数字就是刚刚在不同语言环境中打印的数字1100.60。

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

1
2
3
4
5
6
7
8
9
10
11
12

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

1
2
3
4
5
6
7
8
9

使用格式化的

现在，如果您希望接受本地化的数字，这不是Vue特有的问题，而是JavaScript和一般的浏览器。这意味着您必须找到一个实现所需行为的自定义组件(格式为)。

幸运的是，快速搜索带来了一项似乎可行的工作：

1
2
3
4
5
6
7
8
9
10
11
12
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;
}
}
})

1
2
3
4
5
6
7
8
9
10
11
12

同样，该组件只是更改输入字段。该数字仍然只是一个数字，并且仍然必须使用.toLocaleString()完成"打印"。