Vue中过滤器的使用

一 . 注意事项

          1>  过滤器就是对数据中的文本进行格式化或处理

          2> 过滤器中的方法必须有返回值

          3>  过滤器一般常用在插值表达式或者v-bind中

          4> 过滤器分为全局过滤器和局部过滤器

          5>  全局过滤器使用 Vue.filter(过滤器名称,function(){})

          6> 全局过滤器一定要定义在所有vue实例之前

 二 .  vue中的过滤器分为两种：局部过滤器和全局过滤 

   1）   以时间为例子 传入参数 (全局过滤器的使用)

    <div id="app">

        <p>{{time|formatDate}}</p>
    </div>
    <script>
        // 全局过滤器
        Vue.filter('formatDate', function(t) {
            var m = Math.floor(t / 1000 / 60)
            console.log(m)

            var s = Math.floor(t - m * 60000) / 1000
            console.log(s)
            m = m < 10 ? '0' + m : m;
            s = s < 10 ? '0' + s : s;
            return m + ':' + s
        })

        var vm = new Vue({
            el: '#app',
            data: {
                time: 2805000
            },
            methods: {},
            filters: {
                /*  formatDate(t){
                     var m = Math.floor(t/1000/60) 
                     var s = Math.floor(t-m*60000)/1000
                     m = m<10 ? '0'+m : m;
                     s = s<10 ? '0'+s : s;
                     return  m + ':' + s
                 } */
            }
        })
    </script>

   2）   以时间为例子 传入参数 (局部过滤器的使用)

    <div id="app">

        <p>{{time|formatDate}}</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                time: 2805000
            },
            methods: {},
            filters: {
                formatDate(t) {
                    var m = Math.floor(t / 1000 / 60)
                    var s = Math.floor(t - m * 60000) / 1000
                    m = m < 10 ? '0' + m : m;
                    s = s < 10 ? '0' + s : s;
                    return m + ':' + s
                }
            }
        })
    </script>