Vue global filter concepts, precautions and basic usage methods

1. The concept of filter

1. Customize the format of a global filter

2. How to call the filter

3. Notes on filters

4. Basic usage

1. The concept of filter

Vue.js allows you to customize filters, which can be used for some common text formatting. 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 processing function)

2. How to call the filter

 <!-- When calling a filter, you need to use | to call it, | is called a pipe character -->
      <td>{{item.ctime | formatDate}}</td>

In the filter processing function, the first parameter is fixed and is always the value before the pipe character.

// The data here is the value of item.ctime before the pipe character Vue.filter('formatDate',function(data){

})
// The filter must have a return value

3. Notes on filters

Vue.filter('filter name', filter processing function)
Note: In the filter processing function, the first parameter has a defined function and is always the value before the pipe character.
Call the filter {{item.ctime | formmatDate}} When calling the filter, you need to use | to call it, which is called the pipe character.
You can pass parameters when calling the filter, {{item.ctime | formmatDate('傳遞參數')}}
Note: The parameters passed by calling the filter can only be received from the second parameter of the processing function, because the first parameter has been occupied by the value before the pipe character.
Note: The filter's processing function must return a value
You can use the pipe character to call multiple filters continuously. The final output result is always 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

4. Basic usage

Render a sentence on the page through the vue interpolation expression

  <div id="app">
        <h3>{{mes}}</h3>
    </div>

<script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                mes: "I am a pessimistic person, and pessimistic people do pessimistic things"
            }
        })
    </script>

Requirements: Requirements: 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 and name the filter yourself:

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

Define a method in the filter:

 Vue.filter('setStr',function(data){
            // The filter must have a return value return data.replace(/pessimistic/g,'cheerful')
            // Use the string operation method replace to replace certain elements in the string with other elements, g represents global match})

Then call the filter in the interpolation expression

<div id="app">
        <h3>{{mes | setStr}}</h3>
    </div>

Now go to the page to view the effect:

A basic filter is defined

We can also give the formal parameter 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/g,str)
            // Use the string operation method replace to replace certain elements in the string with other elements, g represents global match})

Then give the actual parameters when calling:

<div id="app">
        <h3>{{mes | setStr("careless")}}</h3>
    </div>

View the results:

You can also give default values in the formal parameters. If no actual parameters are given when calling, the default values are output. If actual parameters are given, the values of the actual parameters are output.

<div id="app">
        <h3>{{mes | setStr}}</h3>
    </div>

    <script src="./js/vue.js"></script>
    <script>

        Vue.filter('setStr',function(data,str="Careful"){
            // The filter must have a return value return data.replace(/pessimistic/g,str)
            // Use the string operation method replace to replace certain elements in the string with other elements, g represents global match})

The result is:

This concludes this article about the concepts, precautions, and basic usage of vue global filters. For more relevant vue global filter content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: