Vue defines private filters and basic usage

The methods and concepts of private filters and global filters are the same, except that one can be called globally, while the private one can only be called by yourself.

Global Filters Click hereGlobal Filters

The usage is the same as the global filter, but the definition is different

The global filter is defined in script through Vue.filter

Private filter definition method:

<script>
        let vm = new Vue({
            el:'#app',
            data:{
            
            },
            filters: { // Private filters for this instance}
        })
    </script>

In the vm instance, there are filters at the same level as data , which are used to define private filters for the current instance.

    <div id="app">
        <p>{{mes | addStr}}</p>
    </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"
            },
            filters: { // Private filter of the current instance addStr(data,str="happy"){
                    return data.replace(/pessimistic/g,str)
                }
            }
        })
    </script>

The output is:

If there is a second instance in the page, vm2 , the filter in vm cannot be called.

If there is a global filter and a private filter on the page, they can be called at the same time

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

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

        Vue.filter('setStr',function(data){
            return data+'I am a global filter'
        })

        let vm = new Vue({
            el:'#app',
            data:{
                mes: "I am a pessimistic person, and pessimistic people do pessimistic things"
            },
            filters: { // Private filter of the current instance addStr(data,str="happy"){
                    return data.replace(/pessimistic/g,str)
                }
            }
        })
    </script>

Output:

Summarize:

When calling, we call the global one in front and the private one behind

But the output result is that the private filter is processed first

Therefore, when calling global and private filters at the same time, the calling rule is whichever is closer will be output first.

First private then global

This is the end of this article about vue definition of private filters and basic usage. For more relevant vue definition of private filters, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Usage of filters in Vue
Solution to the problem that vue objects cannot be updated in real time when adding or deleting members
Detailed explanation of interpolation expressions in Vue basic syntax
A brief introduction to Vue interpolation expression Mustache
Causes and solutions for flashing caused by v-if/v-show/interpolation expressions in Vue
Vue instance members interpolation expressions filter basic tutorial example detailed explanation

<<: Complete guide to using iframe without borders or borders (practical experience summary)

>>: Nginx configuration to achieve multiple server load balancing