vue 2.0 过滤器

在vue1.0中,我们见到过很多的内置过滤器,如 filterBy、orderBy等等,但是在vue 2.0中,这些内置过滤器已经全部舍弃掉。

在vue2.0中,我们想使用过滤器的话,就需要自己动手写一个自定义过滤器,具体怎么搭建,下面就来说一说,不过在这之前,我们先来了解下,过滤器的作用和本质是什么。

作用 : 对数据进行筛选、过滤、格式化等处理

本质 : 一个带有参数和返回值的方法

通过上面,我们不难看出,过滤器其实是一个方法。那么,这个方法是什么样子的呢?我们该怎么去写这个方法?

在vue 2.0中,已经给出了我们这个书写格式

首先是使用方法

<!-- 在双花括号中 -->

{{ message | capitalize }}

<!-- 在 ' v-bind ' 中 -->

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

在一个组件的选项中定义本地的过滤器

filters : {

    capitalize : function (value) {

        if ( !value ) return ' '

        value = value.toString()

        return value.charAt(0).toUpperCase() + value.slice(1)

}

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

Vue.filter('capitalize',  function (value) {

    if  (!value)  return ''

    value = value.toString()

    return value.charAt(0).toUpperCase() + value.slice(1)

})

new Vue ({

     // ...

})

使用

{{ message | capitalize }}

过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中,capitalize 过滤器函数将会收到 message 的值作为第一个参数。

过滤器可以串联:

{{ message | filterA | filterB }}

在这个例子中,filterA 被定义为接收单个参数的过滤器函数,表达式 message 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 filterB,将 filterA 的结果传递到 filterB 中。

过滤器是 JavaScript 函数,因此可以接收参数:

{{ message | filterA('arg1', arg2) }}

这里,filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数,普通字符串 'arg1' 作为第二个参数,表达式 arg2 的值作为第三个参数。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 10,485评论 0 29
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,188评论 19 139
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 6,707评论 0 6
  • 在这个教程中,我们将会通过几个例子,了解和学习VueJs的过滤器。我们参考了一些比较完善的过滤器,比如orderB...
    一缕清风1144阅读 10,302评论 0 1
  • 晴空万里白云飘, 芳草萋萋百树茂。 屹立多少严寒冬, 直把筋骨任风扫。 一一彭甫2018年 4月11日下午迎接 鲍...
    彭甫阅读 3,184评论 1 7

友情链接更多精彩内容