What is the basic method of using vue global filter

This article introduces the relevant knowledge of "what is the basic use of vue global filter". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

one。 The concept of filter

Vue.js allows you to customize filters, which can be used as some common text formatting, and filters can be used in two places: mustache interpolation and v-bind expressions

1. Customize the format of a global filter Vue.filter ('the name of the filter when it is called in the future', the filter's handling function) 2.The calling method of the filter {{item.ctime | formatDate}}

In the filter handler, the first parameter function is fixed and is always the value in front of the pipe character

/ / the data here is the value of item.ctime before the pipe character Vue.filter ('formatDate',function (data) {}) / / there must be a return value of three in the filter. Considerations for filter

Vue.filter ('name of the filter', filter's handler)

Note: in the filter handler, the first parameter, the function has been specified, is always the value in front of the pipe character.

Call filter {{item.ctime | formmatDate}} when calling the filter, you need to use | to call, | called pipe character.

Parameters can be passed when the filter is called, {{item.ctime | formmatDate ('pass parameters')}

Note: the parameters passed by the call filter can only be received from the second parameter of the handler, because the first parameter is already occupied by the value in front of the pipe character.

Note: a value must be returned in the handler of the filter

Multiple filters can be called continuously using pipe characters, and the final output will always be based on the last filter.

Note: filters can only be used in interpolation expressions or v-bind, not in other places, such as v-text

IV. Basic usage

Render a sentence on the page through the vue interpolation expression

{{mes}} let vm = new Vue ({el:'#app', data: {mes: "I am a pessimistic person, pessimistic people do pessimistic things"})

Requirement: replace the word "pessimistic" with "cheerful", provided that the mes source data in Vue cannot be changed.

First, customize a global filter in the script tag, starting with the filter name:

Vue.filter ('setStr',function (data) {})

Define a method in the filter:

Vue.filter ('setStr',function (data) {/ / filter must have a return value return data.replace (/ pessimistic / ghopeful' cheerful') / / use string manipulation method replace to replace some elements in the string with other elements, g for global matching})

Then call the filter in the interpolation expression

{{mes | setStr}}

At this point, go to the page to view the results:

A basic filter is defined.

We can also give formal parameters in the filter function without giving the character to be replaced in the method.

Vue.filter ("strFormat", function (data,str) {/ / you can give a parameter after data / / in the filter, there must be a return value return data.replace (/ pessimistic / gjinger) / / replace some elements in the string with other elements using the string manipulation method replace, g represents global matching})

Then give the argument to the call again:

{{mes | setStr ("careless")}}

View the results:

You can also give the default value in the formal parameter. If you do not give the argument, the default value will be output. If you give the argument, the value of the argument will be output.

{{mes | setStr}} Vue.filter ('setStr',function (data,str= "careful") {/ / filter must have a return value return data.replace (/ pessimistic / gmemstr) / / use string manipulation method replace to replace some elements in the string with other elements, g for global matching})

The result is:

This is the end of the content of "what is the basic use of vue global filter". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!