vuejs separate money with commas and periods-CodePudding

hello in vuejs I want to separate the amount of money with a comma and a period, how can I do it with filter?

I want the currency to be like this.

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

Styling to be applied

I want the part separated by comma to be gray like in the image

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

CodePudding user response：

An easy solution would be to let the filter output the HTML:

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

The filter can be written like so:

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>';
});

Links:

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

Also see this StackOverflow question:
VueJS2 v-html with filter