filter内置过滤器

capitalize

    
    {{ msg | capitalize }}
    

uppercase/lowercase

    
    {{ msg | uppercase }}
    {{ msg | lowercase }}
    

filter内置过滤器

currency

    
    {{ msg | currency }}
    {{ amount | currency '£' 0 }}
    

filter内置过滤器

pluralize

    
    {{5}}{{5 | pluralize 'item'}}
    {{23}}{{23 | pluralize 'st' 'nd' 'rd' 'th'}}
    

filter内置过滤器

json

    
    {{obj | json 4}}
    

filter内置过滤器

debounce

    
    <input @keyup="onKeyup | debounce 500">
    

filter内置过滤器

limitBy

    
    <!--显示五条 从第几个开始-->
    <div v-for="item in items | limitBy 5 10"></div>
    

filter内置过滤器

在所有数据中过滤

    
    <div v-for="item in items | filterBy 'hello'">
    

限定搜索范围(提高性能)

    
    <div v-for="user in users | filterBy 'Jack' in 'name' 'phone'">
        
    

filter内置过滤器

在所有数据中根据指定字段排序

    
    <button @click="order = order * -1">排序反</button>
    <div v-for="item in items | orderBy 'name' -1">
        
    

自定义过滤器

全局方法注册

    
    Vue.filter()
    
    

定义过滤方法

    
    Vue.filter('reverse', function (value,begin,end) {
    return value+begin+end;
    });
    
    

自定义过滤器

将数据写回model

    
    Vue.filter('myFilter', {
    read: function (val) {
    return val.slice(3);
    },
    write: function (val,oldVal) {
    return val.slice(3);
    }
    })
    
    

如果不是字符串则在当前作用域上查找相关字段