Vue过滤器

vue.js允许自定义过滤器，可被用于一些常见的文本格式化

功能：对要显示的数据进行特定格式化后再显示

需求：有一个日期对象，想按照年月日的方式展示

以前的代码需要自己先获取年月日，然后进行拼接，我们利用计算属性来做，如下所示：

    <div id="app">
        <p> 当前日期:{{date}}</p>
        <p > 格式化加入计算属性{{stringfyData}}</p>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let vm = new Vue({
            el : "#app",
            data : {
                date : new Date(),
            },
            computed:{
                stringfyData() {
                    let year = this.date.getFullYear();
                    let month = this.date.getMonth();
                    let day = this.date.getDate();
                    return year + '年' + month + '月' + day + '日';
                }
            }
        })
    </script>

 这种方式存在的缺点是不够灵活，如果要多重时间的格式，使用计算属性不太妥当。

此时可以使用过滤器函数，过滤器是一个函数,在vue配置项中定义，可以定义形参。

先回顾一下已经学过的配置项

el : 定义需要管理的挂载点

data：定义数据项

methods:定义函数

watch 定义监听器

computed 定义计算属性

filters 定义过滤器

局部过滤器定义语法如下：

                filters :{
                    //第一个参数value必须有，表示传递过来需要过滤的数据,其默认是你调用的时候，插值表达式中的值
                    //后面定义n个参数
                    filterName:function(value,[param...]){
                        return 对value过滤后的数据
                    }
                }

全局过滤器定义语法如下：

                可以在所有地方使用
                Vue.filter(filterName,function(value[param....]){
                    return 对value过滤后的数据
                })

注意：局部过滤器和全局过滤器重名，那么需要用局部过滤器

调用方法如下：

{{要过滤的数据名 | 过滤器名字}}
{{要过滤的数据名 | 过滤器名字(arg)}}

示例-----

定义全局过滤器,用来把数据的首字母切换为大写，比如：java->Java

<div id="app">
        <p> 当前日期:{{date}}</p>
        <p > 格式化加入计算属性{{stringfyData}}</p>
        <!-- 原名称 -->
        <p>{{name}}</p>
        <!-- 过滤后的名称 -->
        <p>{{name | capltalize}}</p>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //定义全局过滤器,用来把数据的首字母切换为大写，比如：java->Java
        Vue.filter('capltalize', function(value){//回调函数的第一个参数肯定是要过滤的数据
            //如果value为null, undefined，''都转为false
            if (!value) {
                return '';
            }
            value = value.toString();
            return value.charAt(0).toUpperCase() + value.substr(1);
        })
        let vm = new Vue({
            el : "#app",
            data : {
                date : new Date(),
                name : 'jake'
            },
            computed:{
                // 计算属性虽然定义的方式是函数，但是计算属性是vue实例的属性,直接按照data进行调用的
                stringfyData() {
                    let year = this.date.getFullYear();
                    let month = this.date.getMonth();
                    let day = this.date.getDate();
                    return year + '年' + month + '月' + day + '日';
                }
            }
        })
    </script>

　需求:使用局部过滤器将所有的java(不区分大小写)，更改为JavaScript

  代码如下：

        <p>原message{{msg}}</p>
        <p>过滤后的message</p>
        <p>{{msg | msgfRormat1}}</p>

            filters: {
                msgfRormat1(value) {
                    //JS里面的replace方法，只会替换第一个,我们可以使用正则表达式来进行
                    return value.replace(/java/ig,'JavaScript');
                }
            }

当然，还可以传参数，秩序进行如下修改就行可以，

        <p>原message{{msg}}</p>
        <p>过滤后的message</p>
        <p>{{msg | msgfRormat1('vue.js')}}</p>

            filters: {
                msgfRormat1(value,param = 'JavaScript') {
                    //JS里面的replace方法，只会替换第一个
                    return value.replace(/java/ig,param);
                }
            }

Moment.js这个时间工具可以

在 JavaScript 中解析、校验、操作、显示日期和时间。

用法链接如下：https://momentjs.cn/