Vue.js（2）- 过滤器

• 概念：过滤器本质上就是一个函数，可被用作一些常见的文本格式化。

• 过滤器只可以用在两个地方：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 返回值}
        }