Vue.js -- Summary of Filter Usage

A filter is a simple function that processes input data and returns a data result in real time. Vue has many convenient filters, and filters usually use the pipe symbol “|”, for example:

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

uppercase filter: A filter that converts the input string to uppercase.

VueJs allows you to chain filters, simply put, the output of one filter becomes the input of the next filter, and then it is filtered again. Next, let's imagine a relatively simple example that uses Vue's filterBy + use the orderBy filter to filter all products products. The filtered products are fruit category products.

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

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

Next, let's take a look at the following example: We have an array of products, and we want to iterate through this array and print them as a list. This can be done using v-for is easy to implement.

<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, we use the filterBy filter to filter the list containing the keyword 'fruit' in 'category', and the returned list is the list containing only the keyword 'fruit'. The orderBy filter sorts by price in ascending order. If you want to sort in descending order, you just need to add a parameter less than 0;

Custom Filter

Although VueJs provides us with many powerful filters, sometimes they are not enough. Fortunately, Vue provides a clean and concise way to define our own filters, and then we can use the pipe "|" to complete the filtering.

To define a global custom filter, you need to use the Vue.filter() constructor. This constructor requires two parameters.

Vue.filter() Constructor Parameters:

1.filterId: Filter ID, used as the unique identifier for your filter;

2.filter function: Filter function, which takes a parameter and then formats the received parameter into the desired data result.

In the above example, we need to implement the product price discount5How to do a discount? It is actually an implementation of a custom filter, indicating that the product price has been5discount; to implement it, you need to complete the following:

a、Use Vue.filter() constructor to create a filter named discount

b、Input the original price of the product and return the discounted price after a 50% discount

Code is as follows:

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: 'Pear',price: 65,category: "Fruit"}, 
      {name: 'BMW',price: 2500,category: "Automobile"},
      {name: 'Benz',price: 10025,category: "Automobile"}, 
      {name: 'Citrus',price: 15,category: "Fruit"}, 
      {name: 'Audi',price: 25,category: "Automobile"}
    ]
  },
) 

Now you can use the custom filter just like Vue's built-in filters

<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 implements the product discount5discount, but if you want to apply any discount to the price, you 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 filters in our Vue instance, which is beneficial because it will not affect other Vue instances that do not need to use this filter.

/*Define globally 
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: 'Pear',price: 65,category: "Fruit"}, 
      {name: 'BMW',price: 2500,category: "Automobile"},
      {name: 'Benz',price: 10025,category: "Automobile"}, 
      {name: 'Citrus',price: 15,category: "Fruit"}, 
      {name: 'Audi',price: 25,category: "Automobile"}
    ]
  },
  //Custom in instance
  filters: {
    discount: function(value, discount) {
      return value * (discount / 100);
    }
  }
) 

Filters defined globally can be called in all instances, and if defined in an instance, they can be called in the instance.　

That's all for this article. I hope it will be helpful to everyone's learning and that everyone will support the Yelling Tutorial more.

Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report violations, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)