How to use filter in vue-JS Tutorial-php.cn

This time I will show you how to use the filter in vue, and what are theprecautions for using the filter in vue. The following is a practical case, let's take a look.

1. Custom

filter, of course, this includes registering globally and registering inside instantiation

(1) Registering the global filterer

(1) The global method Vue.filter() registers a custom filter, which must be placed before Vue instantiation

(2) The filter function always ends with

The value of expressionserves as the first parameter. Parameters with quotes are treated asstrings, while parameters without quotes are calculated as expressions

(3) Two filter parameters can be set, provided that these two filters process There is no conflict

(4) The data input by the user from the input can also be processed before being returned to the model

nbsp;html>  vue自定义过滤器    
{{message | sum}}
 {{message | cal 10 20}}
  {{message | sum | currency }}

Copy after login

filter will pass in the current item by default, and the first filter Each parameter defaults to the current item.

(2) Register inside the instantiation

The above example is directly registered on the Vue global, and other instances that do not use this filter will also be forced to accept it. In fact, The filter can be registered inside the instance, and is only registered in the instance using it

The above program is rewritten as:

nbsp;html>  vue自定义过滤器    
{{message | sum}}
 {{message | cal 10 20}}
  {{message | sum | currency }}

Copy after login

2. Use the iteration function filter

in js

How to use filter in vue

(1) Example 1 Original text

var app5 = new Vue({ el: '#app5', data: { shoppingList: [ "Milk", "Donuts", "Cookies", "Chocolate", "Peanut Butter", "Pepto Bismol", "Pepto Bismol (Chocolate flavor)", "Pepto Bismol (Cookie flavor)" ], key: "" }, computed: { filterShoppingList: function () { // `this` points to the vm instance var key = this.key; var shoppingList = this.shoppingList; //在使用filter时需要注意的是，前面调用的是需要使用filter的数组，而给filter函数传入的是数组中的每个item，也就是说filter里面的函数，是每个item要去做的，并将每个结果返回。 return shoppingList.filter(function (item) { return item.toLowerCase().indexOf(key.toLowerCase()) != -1 });; } } })

Copy after login

{{ item }}

The final effect realizes the function of filtering the list based on keywords.

How to use filter in vue

Some other Js iteration methods - filter(), map(), some(), every(), forEach(), lastIndexOf(), indexOf()

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!