Detailed explanation of the usage of Vue.filter function and implementation of data filtering

Detailed explanation of the usage of Vue.filter function and implementation of data filtering

In Vue.js, we often need to perform some specific processing and filtering of data to meet the needs of page display and business logic. The Vue.filter function provides a simple and flexible way to implement data filtering. This article will introduce the usage of Vue.filter function in detail and give some practical example code.

1. Basic usage of Vue.filter function

The Vue.filter function is used to register a global filter, which can be used in templates and components. The specific usage is as follows:

1. Register the filter in the Vue instance:

Vue.filter('filterName', function(value) {
  // 在这里编写过滤器的逻辑代码
  return filteredValue;
});

2. Use the filter in the template or component:

{{ value | filterName }}

2. Implement a simple data filter

Below we use a simple example to illustrate the use of the Vue.filter function.

Suppose you need to display a person's name on the page and convert the name to uppercase, you can first register a filter named "uppercase", the code is as follows:

Vue.filter('uppercase', function(value) {
  if (!value) return '';
  return value.toUpperCase();
});

Then in the template Or use this filter in the component, for example:

<div>{{ name | uppercase }}</div>

In this way, when the value of name is "john", "JOHN" will be displayed on the page.

3. Implement a complex data filter

In addition to simple conversion, the Vue.filter function can also be used to implement more complex data filtering. This is illustrated below with an example.

Suppose there is a list of products, each product has price and discount information, and the discount price of the product needs to be calculated. We can register a filter called "discount" and pass in the discount rate as a parameter. The code is as follows:

Vue.filter('discount', function(value, discountRate) {
  if (!value) return '';
  return (value * discountRate).toFixed(2);
});

Then use the filter in the template or component, for example:

<div>{{ price | discount(0.8) }}</div>

In this way, when the value of price is 10, 8.00 will be displayed on the page, which is the calculated discount price.

4. Custom global filters

In addition to using the Vue.filter function to register global filters, we can also implement global data filtering through Vue.mixin global mixing. Here is a sample code:

// 定义一个全局混入对象
var myFilterMixin = {
  filters: {
    uppercase: function(value) {
      if (!value) return '';
      return value.toUpperCase();
    },
    discount: function(value, discountRate) {
      if (!value) return '';
      return (value * discountRate).toFixed(2);
    }
  }
};

// 将全局混入对象应用到Vue实例中
Vue.mixin(myFilterMixin);

Then we can use these filters in any template or component, for example:

<div>{{ name | uppercase }}</div>
<div>{{ price | discount(0.8) }}</div>

Summary

The Vue.filter function provides provides a simple and flexible way to implement data filtering. By registering global filters, we can easily process and transform data. This article details the usage of the Vue.filter function and gives some practical example code. I hope it can help readers better understand and use the data filtering function in Vue.js.

The above is the detailed content of Detailed explanation of the usage of Vue.filter function and implementation of data filtering. For more information, please follow other related articles on the PHP Chinese website!