Vuejs Custom Filter Usage Summary

A filter is a simple function that allows data to be processed in a timely manner and returns a data result by inputting data. Vue has a lot of handy filters that you can refer to the official documentation, http://cn.vuejs.org/api/#过滤器, and filters typically use the pipe marking "|", for example:

 {{ msg | uppercase  }}  // ‘abc‘ => ‘ABC‘

In the above example, when interpolating, using a Vue uppercase filter, MSG can be directly written dead, write {' abc ' | uppercase}, can also use user input to change the value of MSG.

Uppercase Filter: Converts the input string into an uppercase filter.

Chain-Filter

Vuejs allows you to chain-call the filter, which simply means that the output of one filter becomes the input of the next filter and then filters again. Next, we can imagine a relatively simple example, using Vue's Filterby + order filter to filter all products. The filtered products belong to electrical goods and are sorted by electrical alphabet.

Filterby Filter: The value of the filter must be an array, Filterby + filter condition. The filter condition is: ' string | | function ' + in ' optionkeyname '

Filter by: The value of the filter must be an array, by the + filter condition. The filter condition is: ' string | | Array | | function ' + ' order≥0 for ascending | | Order < 0 for descending '

Next, we can look at the second example: we have a product array products, we want to traverse this array and print them into a list, which is easy to implement with V-for.

<li v-for="product in products">      {{ product.name | capitalize }} - {{ product.price | currency }}</li>

Capitalize filter: Converts the input string first letter to an uppercase filter. Currency Filter: Converts the input number into a cash filter. You can keep up with the currency symbol (default $) and the reserved decimal digits (default 2).

Using the two filters above, it is good to format a JSON array's commodity list into an easy-to-understand commodity price list.

If you want only electrical goods, you can add filter conditions on the v-for:

<li v-for="product in products | filterBy ‘electronics‘ in ‘category‘ ">      {{ product.name | capitalize }} - {{ product.price | currency }}</li>

The above example is to filter the list of ' Electronics ' keywords in ' category ' with Filterby, and the returned list is a list containing only ' electronics ' keywords.

If you want multiple search criteria:

<li v-for="product in products | filterBy ‘electronics‘ in ‘category‘  ‘name‘ ">      {{ product.name | capitalize }} - {{ product.price | currency }}</li>

The above example uses Filterby to filter the list of ' Electronics ' keywords in ' category ' and ' name '.

Finally, we need to sort the list in alphabetical order. We can chain-call the filter by Filterby on the basis of the filter.

<ul>       <li v-for="product in products | filterBy ‘electronics‘ in ‘category‘ | orderBy ‘name‘ " > {{ product.name | capitalize }} - {{ product.price | currency }} </li></ul>

The sort by default is ascending, and if you want to descending, you only need to add a parameter less than 0:

<li v-for="product in products           | filterBy ‘electronics‘ in ‘category‘           | orderBy  ‘name‘  -1 ">

Custom Filters

Although Vuejs provides us with a lot of powerful filters, it is sometimes not enough. Thankfully, Vue gives us a clean and concise way to define our own filters, and then we can use the pipe "|" To complete the filtering.

Defining a global custom filter requires the use of the Vue.filter () constructor. This constructor requires two parameters.

Vue.filter () Constructor Parameters:

1.FILTERID: Filter ID, used as a unique identifier for your filter;

2.filter functions: A filter function that takes one function to receive a parameter and then formats the received parameter as the desired data result.

Back to the previous example: Now imagine that we have an online shop and give us all the merchandise to hit 50 percent.

To complete this example, what we need to do is

• Use the Vue.filter () constructor to create a filter called discount

• Enter the original price of the item and be able to return the discounted price after 50 percent

Vue.filter (' Discount ', function (Value) {ReturnValue *.5; });New Vue ({el:' Body ', data: {products: [{name:' Microphone ', Price:Category:' Electronics '}, {name:' Laptop case ', Price:The Category:' Accessories '}, {name:' Screen Cleaner ', Price:17, Category:  ' laptop charger ', Price: 70, Category:  ' electronics '}, {name:  ' mouse ', Price: 40, Category:  ' electronics '}, {name:  ' earphones ', Price: 20, Category:  ' monitor ', Price: 120, Category:  ' electronics '}]}});    

You can now use a custom filter like a filter that comes with Vue.

<ul>      <li v-for="product in products"> {{ product.name | capitalize }} - {{ product.price | discount | currency }} </li></ul>

The above HTML code will output a list of all items that have been hit after 50 percent.

What if we want an arbitrary discount? We should add a discount value parameter to the discount filter to retrofit our filters.

  ‘discount‘ , function(value,discount) {        return value  * ( discount / 100 ) ; });

and call our filters again.

<ul>      <li v-for="product in products"> {{ product.name | capitalize }} - {{ product.price | discount 25 | currency }} </li></ul>

We can also construct our filters in our Vue instance so that the benefit of the construction is that it does not affect other Vue instances that do not need to use this filter.

  NewVue ({El: ' Body ', data: {products: [{name:' Microphone ', Price:Category:' Electronics '},{Name ' Laptop case ', Price:The Category:' Accessories '},{Name ' Screen Cleaner ', Price:The Category:' Accessories '},{Name ' Laptop charger ', Price:The Category:' Electronics '},{Name ' Mouse ', Price:The Category:' Electronics '},{Name  ' earphones ', Price: 20, Category:  ' electronics '}, {< span class= "rule" >name:  ' monitor ', Price: 120, Category:  ' electronics '}]}, filters: {discount:  function (value, discount) {return value * (Discount/100);              

The definition can call the filter in all instances globally, and if defined in the instance, the filter is called in the instance.

Thanks to the simple pipeline filter constructor, we can not only invoke its native filters, but also customize our own filters. But Vue2.0 seems to have removed it. But I think, if it is with 1.0 of friends still need to use the filter:)

Vuejs Custom Filter Usage Summary