Vue 过滤器

过滤器的使用

局部过滤器

 //1.注册局部过滤器 在组件对象中定义 声明
filters:{
    '过滤器的名字':function(value,a,b){
    }
}
//2.使用过滤器 使用管道符 |
{{price  | '过滤器的名字(a,b)'}}
// price为第一个参数value

例子：

<script src="../vue.js"></script>
<script src="../monment.js"></script>
<script>

    let App = {
        data: function () {
            return {
                msg:"hello world",
                time:new Date()
            }
        },
        template: `
            <div>我是一个app {{ msg | myReverse }}
                <h2>{{ time | myTime('YYYY-MM-DD') }}</h2>
            </div>
        `,
        filters:{
            myReverse:function (val) {
                return val.split('').reverse().join('')
            },
            // 年月日 年月
            myTime:function (val,formatStr) {
                return moment(val).format(formatStr)
            }
        }
    };

    let vm = new Vue({
        el: '#app',
        data: function () {
            return {}
        },
        components: {
            App
        }
    });
</script>

全局过滤器

// 注册全局的过滤器
//第一个参数是过滤器的名字，第二个参数是执行的操作

Vue.filter('reverse',function(value) {
    return value.split('').reverse().join('');
});

//使用跟 局部过滤器一样

<script src="../vue.js"></script>
<script src="../monment.js"></script>
<script>

    // 年月日 年月 全局过滤器
    Vue.filter('myTime', function (val, formatStr) {
        return moment(val).format(formatStr)
    });

    let App = {
        data: function () {
            return {
                msg: "hello world",
                time: new Date()
            }
        },
        template: `
            <div>我是一个app {{ msg | myReverse }}
                <h2>{{ time | myTime('YYYY-MM-DD') }}</h2>
            </div>
        `,
        filters: {
            myReverse: function (val) {
                return val.split('').reverse().join('')
            },
        }
    };

    let vm = new Vue({
        el: '#app',
        data: function () {
            return {}
        },
        components: {
            App
        }
    });
</script>

以后你可以在 API 参考中查阅到完整的实例属性和方法的列表。