vue如何定義私有過濾器

小編給大家分享一下vue如何定義私有過濾器，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

私有過濾器和全局過濾器的方法和概念都相同，只是一個是全局都可以調用，而私有的只有自己可以調用，

全局過濾器點這里全局過濾器

使用方法也和全局過濾器一致，只是定義的地方不同

全局過濾器是在 script 中 通過Vue.filter 定義

私有過濾器定義方法：

<script>
        let vm = new Vue({
            el:'#app',
            data:{
            
            },
            filters: { // 當前實例私有的過濾器

            }
        })
    </script>

在vm實列中，有和 data 同級的 filters，用來定義當前實例的私有過濾器

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

    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                mes:"我是一個悲觀的人，悲觀的人做悲觀的事"
            },
            filters: { // 當前實例私有的過濾器
                addStr(data,str="開心"){
                    return data.replace(/悲觀/g,str)
                }
            }
        })
    </script>

輸出結果為：

如果頁面中 有第二個實例，vm2，去調用 vm 中的過濾器，是調用不到的

如果在頁面上有一個全局過濾器，和私有過濾器，是可以同時調用的

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

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

        Vue.filter('setStr',function(data){
            return data+'我是全局過濾器'
        })

        let vm = new Vue({
            el:'#app',
            data:{
                mes:"我是一個悲觀的人，悲觀的人做悲觀的事"
            },
            filters: { // 當前實例私有的過濾器
                addStr(data,str="開心"){
                    return data.replace(/悲觀/g,str)
                }
            }
        })
    </script>

輸出結果：

看完了這篇文章，相信你對“vue如何定義私有過濾器”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！