Shulou(Shulou.com)06/01 Report--

This article mainly introduces the Vue.js filter how to use the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe you will have a harvest after reading this Vue.js filter article, let's take a look at it.

I. the function of the filter

The filter is used for formatting text content.

Second, the use of the filter

Filters can be used in interpolation expressions and v-bind.

Third, the classification of filters

Global filter

Local filter

IV. Global filter

Global filters can be used in any Vue instance.

The grammar is written as follows:

Vue.filter ('filter name', function (value) {/ / logic code return 'processing result';})

Note: the | vertical bar in the example indicates the pipe character.

15. Global filter. This is the label.

{{value | filterA}}

This is the label.

{{value | filter}}

Vue.filter ('filterA',function (value) {return value.split (' -') join ('');}) new Vue ({el:'# app', data: {value: 'Amura bmurc'}}) new Vue ({el:'# app2', data: {value: 'aMuy bMuy c'}})

A global filter can pass one data into multiple filters for processing.

{{value | filterA | filterB}}

Vue.filter ('filterA',function (value) {console.log (value +' filterA'); return value.split ('-'). Join ('');}) Vue.filter ('filterB',function (value) {console.log (value +' filterB'); return value [0] .toUpperCase () + value.slice (1) }) new Vue ({el:'# app', data: {value:'a Murray bmurc'}})

A filter can pass in multiple parameters.

{{value | filterC ('TGW-',200)}}

Vue.filter ('filterC', function (par1,par2,par3) {console.log (par1,par2,par3); return par2 + par1.split (' -'). Join ('';}); new Vue ({el:'# app', data: {value:'a murbmurc'}) 5. Local filter

Local filters can only be used in the current Vue instance. Cannot be accessed in other Vue instances.

{{content | filterA}}

{{content2 | filterA}}

{{content | filterA | filterB}}

{{content | filterA | filterC ('TGW-')}}

New Vue ({el:'# app', data: {content:'a Murb value, content2: 'dmuremurf'}, filters: {filterA: function (value) {console.log (value) Return value.split ('-'). Join ('')}, filterB: function (value) {return value.split (''). Reverse (). Join (')}, filterC (value,prefix) {return prefix + value }) / / new Vue ({/ / el:'# app2', / / data: {/ / content: 'Gmurhmuri' / /}) VI. Global filter and local filter duplication

When we see that the global filter name is the same as the local filter name, then when we execute it, we follow the nearest principle, so we execute the code block of the local filter.

{{content | filterA}}

Vue.filter ('filterA', function (value) {return value.split (''). Reverse (). Join ('') new Vue ({el:'# app', data: {content:'a Murray bmurc'}) Filters: {filterA (value) {return value.split ('-'). Join ('')}}) this is the end of the article on "how to use Vue.js filters". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to use the filter of Vue.js". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.