vue过滤器

过滤器的本质是一个有参数有返回值的方法。

过滤器的作用：实现数据的筛选、过滤、格式化。

过滤器使用：

语法：
　　{{表达式 | 过滤器}}

举个例子：
　　

{{price | myCurrency}}

过滤器实质不改变原始数据，只是对数据进行加工处理后返回过滤后的数据再进行调用处理，这点要切记。

index.html:

    
    



    

        
        {{length | meter}}
    
    

    

        
        {{price | currency('USD')}}
    

main.js

Vue.filter('meter', function(val, unit){
    val = val || 0;
    unit = unit || 'm';
    return (val/1000).toFixed(2) + unit;
})

Vue.filter('currency', function(val, unit){
    val = val || 0;
    unit = unit || "元"
    return val+unit;
})

new Vue({
    el: '#app',
    data: {
        price: 10,
        length: 10
    }
})

    
{{msg | upperCase(true)}}

new Vue({
    el: '#app',
    data: {
        msg: "hello world"
    },
    filters: {
        upperCase: function(val, isFirstUpper){
            val = val.toString();
            if(isFirstUpper){
                return val.charAt(0).toUpperCase() + val.slice(1);
            }else{
                return val.toUpperCase();
            }
        }
    }
});

{{msg | firstUpper}}

new Vue({
    el: '#app',
    data: {
        msg: "hello world"
    },
    filters: {
        firstUpper: function(val){
            var arr = val.split(" ");
            var newArr = arr.map(function(value){
                return value.charAt(0).toUpperCase() + value.slice(1);
            });
            return newArr.join(" ");
        }
    }
});