Vue implements the digital thousands separator format globally

This article example shares the specific code for Vue to globally implement the digital thousands separator format for your reference. The specific content is as follows

What does this mean? When we need to render data on the page, for example, 88888, we need to display it in a format that is easy to read, 88,888, according to the thousandths.

At this time, what I do is to write a filter in vue and filter all the data with this filter.

Because the data involved is relatively large, I mounted this filter globally so that it does not need to be referenced on each page.

Conversion code implementation

First, create a file numberToCurrency.js to implement the conversion function of the thousand separator of numbers.

export function numberToCurrencyNo(value) {
  if (!value) return 0
  // Get the integer part const intPart = Math.trunc(value)
  // Integer part processing, increase,
  const intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
  // Predefined decimal part let floatPart = ''
  //Truncate the value into decimal and integer parts const valueArray = value.toString().split('.')
  if (valueArray.length === 2) { // There is a decimal part floatPart = valueArray[1].toString() // Get the decimal part return intPartFormat + '.' + floatPart
  }
  return intPartFormat + floatPart
}

Okay, this is achieved. Of course, if there are other requirements, the specific conversion code needs to be modified according to the actual situation.

Next comes the citation.

Reference mount global

Import the filter file just now into the main.js file and mount it globally.

import { numberToCurrencyNo } from '@/utils/numberToCurrency'
// Configure the global filter to implement the digital thousandths format Vue.filter('numberToCurrency', numberToCurrencyNo)

That's it, and then you can use it where you need to convert.

use

If you use it, it is the same as the normal filter.

<p class="num color1">{{riskAll| numberToCurrency}}</p>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.