Detailed explanation of filters for Vue.js learning

Preface

In this tutorial, we will understand and learn VueJs filters through several examples. The prerequisite for reading this article is that you already have a basic syntax foundation for Vue.

Basics of filters in Vue.Js

A filter is a simple function that can process data in time and return a data result by inputting data. Vue has many very convenient filters. You can refer to the official documentation, http://cn.vuejs.org/api/#Filter. Filters usually use the pipe mark "|", such as:

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

uppercase filter: A filter that converts the input string into uppercase letters.

VueJs allows you to chain call filters. Simply put, the output of one filter becomes the input of the next filter, and then filtered again. Next, we can imagine a relatively simple example using Vue's filterBy + orderBy filter to filter all products. The filtered products are fruit 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

Next, we can look at the following example: We have a product Array products, we want to traverse this array and print them into a list. This is easy to achieve with v-for.

<ul class="product">
 <li v-for="product in products|filterBy &#39;水果&#39; in &#39;category&#39; |orderBy &#39;price&#39; 1">
 {{product.name}}-{{product.price | currency}}
 </li>
</ul>

The above example is to use filterBy to filter the list containing the 'fruit' keyword in 'category'. The returned list is a list containing only the 'fruit' keyword, and The orderBy filter does an ascending order based on price. If you want to order descending, you only need to add a parameter less than 0;

Custom filter

Although VueJs provides us with a lot of powerful filter, but sometimes it's not enough. Fortunately, Vue provides us with 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 of your filter;

2.filter function: The filter function uses a function to receive a parameter, and then formats the received parameter into the desired data result.

In the above example, what should we do to achieve a 50% discount on the product price? In fact, it is a custom filter implemented, which means that the price of the product is discounted by 50%; to implement it, what needs to be completed is:

a. Use the Vue.filter() constructor to create a filter The tool is called discount

b. Enter the original price of the product, and the discounted price after 50% off can be returned.

See the code below:

Vue.filter('discount', function(value) {
 return value * .5;
});
var product = new Vue({
 el: '.product',
 data: {
 products: [
  {name: '苹果',price: 25,category: "水果"},
  {name: '香蕉',price: 15,category: "水果"},
  {name: '雪梨',price: 65,category: "水果"},
  {name: '宝马',price: 2500,category: "汽车"},
  {name: '奔驰',price: 10025,category: "汽车"},
  {name: '柑橘',price: 15,category: "水果"},
  {name: '奥迪',price: 25,category: "汽车"}
 ]
 },
})

Now You can use custom filters just like Vue's own filters.

<ul class="product">
 <li v-for="product in products|filterBy &#39;水果&#39; in &#39;category&#39; |orderBy &#39;price&#39; 0">
 {{product.name}}-{{product.price|discount | currency}}
 </li>
</ul>

The products implemented by the above code are 50% off, but what if you want to achieve any price discount? 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 re-call our filter

<ul class="product">
 <li v-for="product in products|filterBy &#39;水果&#39; in &#39;category&#39; |orderBy &#39;price&#39; 0">
 {{product.name}}-{{product.price|discount 25 | currency}}
 </li>
</ul>

We can also construct our filter in our Vue instance, constructed like this The advantage is that this will not affect other Vue instances that do not need to use this filter.

/*定义在全局
Vue.filter('discount', function(value,discount) {
 return value * ( discount / 100 ) ;
});
*/
var product = new Vue({
 el: '.product',
 data: {
 products: [
  {name: '苹果',price: 25,category: "水果"},
  {name: '香蕉',price: 15,category: "水果"},
  {name: '雪梨',price: 65,category: "水果"},
  {name: '宝马',price: 2500,category: "汽车"},
  {name: '奔驰',price: 10025,category: "汽车"},
  {name: '柑橘',price: 15,category: "水果"},
  {name: '奥迪',price: 25,category: "汽车"}
 ]
 },
 //自定义在实例
 filters: {
 discount: function(value, discount) {
  return value * (discount / 100);
 }
 }
})

If defined globally, the filter can be called in all instances. If it is defined in an instance, the filter will be called in the instance.

Summary

The above is the entire content of this article. I hope the content of this article can be helpful to everyone in learning or using vue. If you have any questions, you can leave a message to communicate.

For more detailed articles on Vue.js learning filters, please pay attention to the PHP Chinese website!