Vue过滤器 filter

过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化(比如在123后面加上abc,或者将一些状态值转为具体的描述：state=0显示‘已领取’等)。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式

1 2 3 4 5

<!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatId"></div>

全局过滤器

在创建 Vue 实例之前全局定义过滤器:

1
2
3
4
5
6
7
8
9

Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
// ...
})

组件过滤器（局部）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<div class="status">{{item.is_verify|prizeState}}</div>

//filters过滤器是和生命周期是同级的
created(){
        this.getPrizeList()
    },
filters:{
        prizeState:function(val){//参数val就是上面的item.is_verify,花括号内的插值会是prizeState中return出来的数据
            if(val==0){
                return '未使用'
            }
            if(val==1){
                return '已使用'
            }
            if(val==11){
                return '未开始'
            }
            if(val==12){
                return '已过期'
            }
        }
    },

用法

1、过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，prizeState 过滤器函数将会收到 item.is_verify 的值作为第一个参数，插值的内容会变为prizeState函数return出去的数据

如上述例子，如果item.is_verify的值是1，插值就会是‘未使用’

2、过滤器可以串联

1	{{ message | filterA | filterB }}

上面的这个例子中filterA接收的参数是message，filterB接收的是filterA中return出来的结果

3、过滤器是 JavaScript 函数，因此可以接收参数

1	{{ message | filterA(参1, 参2) }}

如上：filterA 被定义为接收三个参数的过滤器函数，第一个参数是message，剩下两个参数是传到filterA中的两参数

注意：全局注册时是filter，没有s的。而组件过滤器是filters，是有s的。