vue 过滤器

过滤器

过滤器的作用

格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等

自定义过滤器

Vue.filter("过滤器名称", function(value){
    //过滤器业务逻辑
})

过滤器使用的基本规则

可以通过插值显示通过竖线添加过滤器，还可以联机使用过滤器，也可以应用于属性绑定

<!-- 通过插值显示数据  这里upper和lower皆为过滤器名称-->
<div>{{msg | upper}}</div>
<!-- 支持级联操作 -->
<div>{{msg | upper | lower}}</div>
<!-- 应用于属性绑定 -->
<div :abc='msg | upper'>测试数据</div>

局部过滤器

过滤器的局部申明，在Vue组件实例中添加如下语法

fileters:{
    capitalize:function(){}
}

带参数的过滤器

使用该过滤器时，传进来的参数会存在arg中，value存放的是自身的值

Vue.filter("format", function(value , arg){
    //value就是过滤器穿过来的参数
})

带参数的过滤器的使用

<div>{{date | format('yyy-MM-dd')}}</div>