Vue---过滤器的使用

一、过滤器的作用是什么

1.格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等
 

二 .过滤器的使用

1.在Vue中过滤器和data、methods、computed是一个级别的，所以它的位置也和它们一样： 

<script>
export default {
    name: "app",
    // 数据
    data() {
        return {};
    },
    //方法
    method:{},
    //计算属性
    computed:{},
    //过滤器
    filters:{}
};
</script>

注意：过滤器函数必须要有返回值（return） 

三.过滤器分全局过滤器和局部过滤器

1.局部过滤器

作用范围为当前Vue实例所挂载的范围

        let vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello'
            },
            // 局部过滤器
            filters: {
                // 自定义时间过滤器
                过滤器名称:function() {
                    // 对应的处理逻辑
                }
            }
        })

 2.全局过滤器

作用范围为全局可用

    <script>
        // 全局时间过滤器
        Vue.filter('过滤器名称', function() {
            // 对应处理逻辑
        })
        let vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello'
            }
        })
    </script>

 四.带参数的过滤器

注意：过滤器的第一个参数的值为需要过滤的数据，第二个开始以后的参数像普通函数的·参数一样

    <script>
        // 全局时间过滤器
        Vue.filter('过滤器名称', function(value,arg1) {
            // value参数就是需要过滤的数值，arg1就是函数的形参
            // 对应处理逻辑
        })
        let vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello'
            }
        })
    </script>

 五.过滤器的使用(通过管道 | 使用)

1.在差值表达式中

        
//不带参数
<span>{{time|timeFormate}}</span>
//带参数
<span>{{time|timeFormate('yyyy-mm-dd')}}</span>

 2.在属性绑定中

//不带参数
<span v-blind:id="id|idFormate"></span>
//带参数
<span v-blind:id="id|idFormate('1:')"></span>