Recently, in the development of the project, there are some formatting data, such as the case of letters, such as some price data format. And so on some format display.

Name Price
BTC The $3896.23
ETH The $136.64

In the table above, we need to deal with the display of data. This is a situation we often encounter.

Normally we’re going to deal directly with the output of the data, so we can do that.

computed: {
    result() {
      return this.prices.map(price => "$"+ price); }}Copy the code

This is all done by modifying the data.

However, Vue provides us with a “filter” for formatting data capabilities.

Filters, unlike computed attributes and methods, do not modify the data; they just change the output that the user sees. Vue has removed built-in “filters” since version 2.0. So we need to define ourselves when we use it.

Next, let’s look at how “filters” are used in Vue.

First filter can be used in two places: differential expression {{}} and v – bind expression, and then by the pipeline operator instructions “|”.

Knowing where it is, let’s look again at how to define filters. We can define it two ways.

Local filter

We can define filters within the currently used component. We use filters to modify the table output format above.

{{price.price | currency}}

filters: {
    currency(value) {
      return "$"+ value; }}Copy the code

Global filter

It is important to note that global filters must be used before instances of Vue.

Vue.filter("currency".function (value) {
  return "$" + value;
});


new Vue({
 //...
})
Copy the code

At this point, we can happily use filters in our components.

The user experience is a very important part, and we can optimize it with filters. In general, when presenting data in tables, you can’t guarantee that the attribute values for each field are valid.

This is where the filter comes in. Displaying unreasonable values as “–” is the most common technique.

filters: {
    filterPrice(value) {
      return value ? value : "--"; }}Copy the code

Filter parameter

The filter always treats the value in the expression as the first argument to the function. Since the filter is a function, we can also pass in additional arguments.

{{ data | filterPrice(arg1, arg2) }}
Copy the code

For example, if we modify the above example, we need to format not only the dollar, but also the YUAN, and so on, and so on, and so on, so we can use the pass-through method.

{{price.price | filterPrice('$')}}

filters: {
    filterPrice(price, prefix) {
      returnprefix + price; }}Copy the code

In addition, the filter can also be used in series.

{{ data | filterA | filterB }}
Copy the code

When used in series, the result of the first filter is passed as a parameter to the second filter, and so on.

Ok, today we Vue filter said that this, you might as well try to use in the project, improve our development efficiency, not always think to modify the data, these functions and routines sometimes play a very good value.

Give it a thumbs up if it inspires you.

Pay attention to my wechat public number: six small dengdeng, more dry goods articles, welcome to exchange.

Anyone can be a master. I am a skilled and dry coder. Welcome to hook up.