• 概念：過濾器本質上就是一個函式，可被用作一些常見的文字格式化。

• 過濾器只可以用在兩個地方：mustache 插值表示式和 v-bind 表示式。

• 過濾器應該被新增在 JavaScript 表示式的尾部，由“管道”符指示；

 全域性過濾器

<div id="app">
        <!-- | 管道符，msg先交給 dateFormat 過濾，然後結果再交給 String 過濾-->
        <p>{{msg | dateFormat | String }}</p>
        <
 
p>{{msg}}</p>
    </div>
    <script type="text/javascript">
        // 全域性過濾器
        Vue.filter('dateFormat', function (originVal) {
            const dt = new Date(originVal)
            const y = dt.getFullYear()
            const m = (dt.getMonth() + 1 + '').padStart(2, '0')
            const d 
 
= (dt.getDate() + '').padStart(2, '0')
            const hh = (dt.getHours() + '').padStart(2, '0')
            const mm = (dt.getMinutes() + '').padStart(2, '0')
            const ss = (dt.getSeconds() + '').padStart(2, '0')
            return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
        })

        Vue.filter(
 
'String', function (originVal) {
            return "==" + originVal + "=="
        })

        var vm = new Vue({
            el: '#app',
            data: {
                msg: new Date()
            },
            methods:{}
        })

在專案中使用，需要在main.js中定義全域性過濾器

 過濾器傳參

<div id="app">
        <!-- pattern就是傳的yyyy-mm-dd引數 -->
        <p>{{msg | dateFormat('yyyy-mm-dd')}}</p>
        <p>{{msg}}</p>
    </div>
    <script type="text/javascript">
        // 全域性過濾器
        Vue.filter('dateFormat', function (originVal,pattern) {
            console.log(pattern)
            const dt = new Date(originVal)
            const y = dt.getFullYear()
            const m = (dt.getMonth() + 1 + '').padStart(2, '0')
            const d = (dt.getDate() + '').padStart(2, '0')
            if (pattern === 'yyyy-mm-dd') {
                return `${y}-${m}-${d}`
            } else {
                const hh = (dt.getHours() + '').padStart(2, '0')
                const mm = (dt.getMinutes() + '').padStart(2, '0')
                const ss = (dt.getSeconds() + '').padStart(2, '0')
                return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
            }
            
        })

        var vm = new Vue({
            el: '#app',
            data: {
                msg: new Date()
            },
            methods:{}
        })
    </script>    

注意：不傳參預設的引數是undefined

私有過濾器

<div id="app">
        <!-- pattern就是傳的yyyy-mm-dd引數，傳參傳的是條件！ -->
        <p>{{msg | dateFormat('yyyy-mm-dd')}}</p>
        <p>{{msg}}</p>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                msg: new Date()
            },
            methods:{},
            filters: {
                dateFormat: function (originVal,pattern) {
                    console.log(pattern)
                    const dt = new Date(originVal)
                    const y = dt.getFullYear()
                    const m = (dt.getMonth() + 1 + '').padStart(2, '0')
                    const d = (dt.getDate() + '').padStart(2, '0')
                    if (pattern === 'yyyy-mm-dd') {
                        return `${y}-${m}-${d}`
                    } else {
                        const hh = (dt.getHours() + '').padStart(2, '0')
                        const mm = (dt.getMinutes() + '').padStart(2, '0')
                        const ss = (dt.getSeconds() + '').padStart(2, '0')
                        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
                    }
                }
            }
        })
    </script>

其他

當全域性過濾器和私有過濾器重名時，優先使用私有過濾器

　　　　　// 全域性過濾器
        Vue.filter('過濾器', function (originVal) { return 返回值})

        // 私有過濾器
        filters: {
            過濾器名稱: function(originVal) {return 返回值}
        }