Vue - 过滤器filter

808 阅读2分钟

过滤器的作用

格式化数据,比如将字符串格式化为首字母大写或者将日期格式化成指定的格式等。

自定义过滤器

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

过滤器的使用

使用插值表达式的方式有2种,一种是通过插值表达式一种是通过属性绑定的值。

通过插值表达式使用单个过滤器

<div>{{msg | upper}}</div>

通过插值表达式叠加使用多个过滤器

<div>{{msg | upper | lower}}</div>

通过属性绑定的值的形式来使用过滤器

<div v-bind:id="id | formatId"></div>

局部过滤器

  上面在main.js里定义的是全局过滤器,下面讲一下具体定义到某个组件中只适用于该组件的局部过滤器。跟之前讲过的自定义指令同理,全局过滤器作为Vue原型的实例定义在main.js中,而局部过滤器则作为属性定义在组件中的export default里。

带参数的过滤器

  下面用带参数的过滤器来写一个日期格式。

  写到这一步的效果如下:

  下面试一下向过滤器传参:

  下面简单用传参格式的方式来格式化一下上面得到的日期:

  这样写的弊端是当需要的格式改变,格式化的处理逻辑就要涵盖所有所需的格式,如此写下来代码冗长容易出错眼花缭乱不好管理。

  以下有一份大神简化好的处理逻辑,是通过正则的方式来匹配不同格式的日期:

  将这段逻辑封装到一个对外暴露的js文件里然后在回到组件引入该js文件并在过滤器中调用函数即可(此用法针对局部过滤器)。

  为了验证效果我们在原来日期格式的基础上加入时分秒: