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 < 0 for descending 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:

​

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: "汽车"}
 ]
 },
})

<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>

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

<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>

/*定义在全局
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);
 }
 }
})