How to format numbers in VueJS

In Vue.js, formatting numbers often requires filters or computed properties. Both methods allow you to present the data without altering the original data. I will now explain both methods in detail, providing specific code examples.

Using Filters

In Vue.js, filters are primarily used for text formatting. When you need to format numbers repeatedly across multiple components, defining a global filter is a good choice.

Defining a Global Filter

We can create a filter to format numbers, for example, adding thousands separators:

javascript
Vue.filter('numberFormat', function(value) {
    if (!value) return '';
    return value.toLocaleString();
});

In this example, the toLocaleString() method formats the number according to local conventions, which typically includes adding thousands separators.

Using Filters

Once defined, you can use it in any component's template like this:

html
<p>{{ 1234567 | numberFormat }}</p>

This will output 1,234,567.

Using Computed Properties

If number formatting is only used in a single component or the formatting logic is more complex, using computed properties may be more appropriate.

Creating Computed Properties

Suppose we have a component with a data property price, and we want to format and display this price:

javascript
data() {
    return {
        price: 5000
    };
},
computed: {
    formattedPrice() {
        return this.price.toLocaleString('en-US', { style: 'currency', currency: 'USD' });
    }
}

In this example, we use additional parameters of toLocaleString to specify the currency format.

Using Computed Properties in Templates

Then you can use it in the template like this:

html
<p>The price is: {{ formattedPrice }}</p>

This will output The price is: $5,000.00.

Summary

Through the above examples, we can see that formatting numbers in Vue.js is very flexible and powerful. Choosing between filters and computed properties based on different requirements is key. Filters are suitable for lightweight and cross-component general formatting, while computed properties are better for handling more complex logic or internal data processing within components. This design helps maintain code clarity and maintainability.