vuejs 用逗号和句点分隔钱答案

【问题标题】：vuejs separate money with commas and periodsvuejs 用逗号和句点分隔钱
【发布时间】：2021-12-09 13:06:31
【问题描述】：

你好在vuejs中我想用逗号和句点分隔金额，我该如何使用过滤器？

我希望货币是这样的。

<p>1.000<span>,00</span></p>

我希望用逗号分隔的部分像图像中一样是灰色的

Vue.filter('toTL', function (value) {
    return new Intl.NumberFormat('tr-TR', { currency: 'TRY', minimumFractionDigits: 2}).format(value);
});

【问题讨论】：

此时数字是一个字符串，您可以根据需要应用字符串函数。您可以用split(',') 分隔值并输出结果的[0] 和[1]。
我不知道怎么做我是新手请帮忙
好的，请说明您如何在代码中使用价格。它在data 属性中吗？是method 吗？是computed 值吗？
用法如下{{ 1500 | toTL }}，这给了我这样的图像显示。输出1.500,00html 输出1.500,00
我想要的 html 输出是下面的形状，1,500 ,00

标签： vue.js

【解决方案1】：

一个简单的解决方案是让过滤器输出 HTML：

<p class="amount" v-html="$options.filters.toTL(attributes.gross_total)" />

过滤器可以这样写：

Vue.filter('toTL', function (value) {
    let formatted = new Intl.NumberFormat('tr-TR', { currency: 'TRY', minimumFractionDigits: 2}).format(value);
    let arr = formatted.split(',');

    return arr[0] + '<span>,' + arr[1] + '</span>';
});

链接：

String.prototype.split 文档：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split

另请参阅 StackOverflow 问题：
VueJS2 v-html with filter

【讨论】：