逗号十进制值的 vue 指令绑定值问题

Question

我的html代码就是这样====>

<span class="custom-super-script" data-language="en" v-fraction-superscriptor="1,310.66">

我的 vue 指令是====>

Vue.directive("fraction-superscriptor", function (el, binding) {

let number = !isNaN(parseFloat(binding.value)) ? parseFloat(binding.value).toFixed(2) : 0;

number = parseFloat(number).toLocaleString(el.dataset.language || "nl-nl", { useGrouping: false, minimumFractionDigits: 2 });
});

但我得到的值总是 310.66 而不是 1310.66。当我检查绑定时，我得到了这个。

def: {bind: ƒ, update: ƒ}
expression: "1,310.66"
modifiers: {}
name: "fraction-superscriptor"
rawName: "v-fraction-superscriptor"
value: 310.66

如何解决这个问题？它只会对大于 1000 的数字造成问题。

Answer 1

在 v-fraction-superscriptor="1,310.66" 中，"1,310.66" 被计算为 javascript 表达式。逗号 (,) 是有效的 javascript operator，这就是为什么它在计算表达式后 returns "310"。在您的情况下，将它作为这样的字符串传递，您将获得正确的值。

v-fraction-superscriptor="'1,310.66'"

逗号十进制值的 vue 指令绑定值问题

vue directive binding value issue for comma decimal value

javascript

vuejs2

vue-directives