Vue. js learning filter details, vue. js filter details

Vue. js learning filter details, vue. js filter details

Preface

In this tutorial, we will use several examples to learn about and learn VueJs filters. The premise of reading this article is that you have a basic syntax for Vue.

Filter basics in Vue. Js

A filter is a simple function that can process data in time and return a data result through input data. Vue has a lot of convenient filters. For more information, see the official documentation, http://cn.vuejs.org/api/#filter. The filters usually use the pipe sign "|", for example:

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

Uppercase filter: a filter that converts an input string to uppercase/lowercase letters.

VueJs allows you to call the filter chain. Simply put, the output of a filter is the input of the next filter, and then filter again. Next, we can imagine a simple example, using the Vue filterBy + orderBy filter to filter all products. The filtered products are fruit products.

FilterBy filter: the filter value must be an array, and the filterBy + filter condition is used. Filter condition: 'string | function' + in 'optionkeyname'

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

Next, let's take a look at the following example: we have a product array products. We want to traverse this array and print them into a list, which is easily implemented using v-.

<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 'go' keyword in 'category'. The returned list is a list containing only the 'go' keyword, the orderBy filter is made in ascending order based on the price. To reduce the order, you only need to add a parameter smaller than 0;

Custom Filter

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

To define a global custom filter, you must useVue.filter()Constructor. This constructor requires two parameters.

Vue.filter() Constructor Parameters:

1. filterId: the ID of the filter, which is used as the unique identifier of your filter;

2. filter function: A filter function that receives a parameter and then formats the received parameter as the desired data result.

In the above example, what should we do if we want to make the product price off? In fact, a custom filter is implemented, which means that the price of the product is reduced by. What needs to be done to achieve it is:

A. Use the Vue. filter () constructor to create a filter called discount.

B. if you enter the original price of a product, you can return the discount price after discount.

The code can be found below:

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: "car" },{ name: 'merce', price: 10025, category: "car" },{ name: 'city', price: 15, category: "Fruit" },{ name: 'audi ', price: 25, category: "Auto"}] },})

Now you can use a custom filter just like the one that comes with the 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 product implemented in the code above is off, but what if you want to get any discount? We should add a discount value parameter to the discount filter to 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 this will not affect other Vue instances that do not need this filter.

/* Defined in 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: "car" },{ name: 'merce', price: 10025, category: "car" },{ name: 'city', price: 15, category: "Fruit" },{ name: 'audi ', price: 25, category: "Auto"}]}, // custom in the instance filters: {discount: function (value, discount) {return value * (discount/100 );}}})

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

Summary

The above is all the content of this article. I hope this article will help you learn or use vue. If you have any questions, please leave a message.