Vue. js A summary of filter usage

Filter is a simple function that can process data in time and return a data result by inputting data. Vue has a number of handy filters that usually use the pipe flag "", such as:

{{ msg | capitalize }}
// 'abc' => 'ABC' 

uppercase Filter: A filter that converts input strings to uppercase letters.

VueJs allows you to chain filters. Simply put, 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 filterBy + orderBy filter of Vue to filter all products products. The filtered products belong to fruit commodities.

filterBy Filter: Filter values must be 1 array, filterBy + filter criteria. The filter conditions are: 'string function' + in 'optionKeyName'

orderBy Filter: Filter values must be an array, orderBy + filter criteria. The filter condition is: 'string array function' + 'order ≥ 0 is ascending order < 0 is descending '

Next, let's look at the following example: We have an array of items products, and we want to traverse this array and print them into a list, which is easy to implement with v-for.

<ul class="product">
  <li v-for="product in products|filterBy ' Fruit ' in 'category' |orderBy 'price' 1">
    {{product.name}}-{{product.price | currency}}
  </li>
</ul> 

In the above example, filterBy is used to filter the list containing the keyword "fruit" in 'category', and the returned list is only the list containing the keyword "fruit", while orderBy filter makes an ascending order according to the price. If you want to descend, you only need to add a parameter less than 0;

Custom filter

Although VueJs provides us with many powerful filters, sometimes it is not enough. Thankfully, Vue provides us with a clean and concise way to define our own filters, and then we can use the pipeline "" to complete the filtering.

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

Vue.filter() Constructor Parameters:

1. filterId: Filter ID, which is used as the only identification of your filter;

2. filter function: A filter function that uses an function to receive one parameter, and then formats the received parameter into the desired data result.

In the above example, what should we do to realize a 50% discount on commodity prices? In fact, it is a custom filter, which means that the price of goods is 50% off; To achieve it, what needs to be done is:

a, using the Vue. filter () constructor to create a filter called discount

b: Enter the original price of the commodity and return the discount price after 50% discount

See the following code:

Vue.filter('discount', function(value) {
  return value * .5;
});
var product = new Vue({
  el: '.product',
  data: {
    products: [
      {name: ' Apple ',price: 25,category: " Fruit "}, 
      {name: ' Banana ',price: 15,category: " Fruit "}, 
      {name: ' Sydney ',price: 65,category: " Fruit "}, 
      {name: ' BMW ',price: 2500,category: " Automobile "},
      {name: ' Mercedes-Benz ',price: 10025,category: " Automobile "}, 
      {name: ' Citrus ',price: 15,category: " Fruit "}, 
      {name: ' Audi ',price: 25,category: " Automobile "}
    ]
  },
}) 

You can now use custom filters just as you used filter 1 that comes with Vue

<ul class="product">
  <li v-for="product in products|filterBy ' Fruit ' in 'category' |orderBy 'price' 0">
    {{product.name}}-{{product.price|discount | currency}}
  </li>
</ul> 

The above code realizes 50% discount on goods, but if you want to realize any discount on prices? We should add a discount value parameter to the discount filter and modify our filter.

 Vue.filter('discount', function(value, discount) {
  return value * (discount / 100);
}); 

Then call our filter again

 <ul class="product">
  <li v-for="product in products|filterBy ' Fruit ' in 'category' |orderBy 'price' 0">
    {{product.name}}-{{product.price|discount 25 | currency}}
  </li>
</ul> 

We can also construct our filter in our Vue instance. The advantage of this construction is that it does not affect other Vue instances that do not need this filter.

/* Defined in the global  
Vue.filter('discount', function(value,discount) {
  return value * ( discount / 100 ) ;
});
*/
var product = new Vue({
  el: '.product',
  data: {
    products: [
      {name: ' Apple ',price: 25,category: " Fruit "}, 
      {name: ' Banana ',price: 15,category: " Fruit "}, 
      {name: ' Sydney ',price: 65,category: " Fruit "}, 
      {name: ' BMW ',price: 2500,category: " Automobile "},
      {name: ' Mercedes-Benz ',price: 10025,category: " Automobile "}, 
      {name: ' Citrus ',price: 15,category: " Fruit "}, 
      {name: ' Audi ',price: 25,category: " Automobile "}
    ]
  },
  // Customize in the instance 
  filters: {
    discount: function(value, discount) {
      return value * (discount / 100);
    }
  }
}) 

Filters can be invoked in all instances if defined globally, or in instances if defined.