专栏首页Modeng的专栏Vue案例引发的「过滤器」的使用

Vue案例引发的「过滤器」的使用

最近在项目的开发中,出现一些格式化数据的情况,比如字母的大小写,比如一些价格的数据格式。等等一些格式的显示。

Name

Price

BTC

$3896.23

ETH

$136.64

在上面的表格中,我们需要处理数据的显示。这是我们时常遇到的情况。

通常我们会直接处理数据的输出,可以这么做。

computed: {
    result() {
      return this.prices.map(price => "$" + price);
    }
}

这些都是通过修改数据做到的。

不过,Vue 中给我们提供了一种格式化数据功能「过滤器」。

filters 与 计算属性(computed),方法(methods)不同的是,filters 不会修改数据,只是改变用户看到的输出。Vue 从 2.0 版本之后去除了内置的「过滤器」。所以我们在使用时需要自己去定义。

接下来,我们就来看看看在 Vue 中如何使用「过滤器」。

首先过滤器可以用在两个地方:差值表达式 {{ }} 和 v-bind 表达式,然后由管道操作符“ | ”进行指示。

知道在什么地方时候,那我们就再来看看如何定义过滤器。我们有两种方式定义。

本地过滤器

我们可以把过滤器定义在当前使用的组件内。我们利用过滤器来修改上面的表格输出格式。

{{price.price | currency}}

filters: {
    currency(value) {
      return "$" + value;
    }
}

全局过滤器

这里需要注意的是,使用全局过滤器时,必须要在 Vue 的实例之前。

Vue.filter("currency", function (value) {
  return "$" + value;
});


new Vue({
 //...
})

此时,我们就可以愉快的在组件中使用过滤器了。

用户体验是非常重要的一个环节,我们可以利用过滤器去优化。通常利用表格展示数据时,你无法保证每个字段的属性值都是存在且合理的。

这时就可以利用「过滤器」。把不合理的值显示为 “–”,这是最为常见的手段。

filters: {
    filterPrice(value) {
      return value ? value : "--";
    }
}

过滤器参数

过滤器会把表达式中的值始终当作函数的第一个参数。由于过滤器是一个函数,所以我们也可以额外的传入参数。

{{ data | filterPrice(arg1, arg2) }}

比如我们把上面的案例修改一下,我们不仅仅需要把美元格式化,我们还需要格式化人民币等等,很多种的符号,这时就可以利用传参的方式。

{{price.price | filterPrice('$')}}

filters: {
    filterPrice(price, prefix) {
      return prefix + price;
    }
}

除此之外,「过滤器」还可以进行串联使用。

{{ data | filterA | filterB }}

串联使用时,会把第一个产生的结果,作为参数传递给第二个过滤器使用,以此类推。

好了今天我们 Vue 的过滤器就说到这,大家不妨多多尝试下在项目中使用,提高我们的开发效率,不能总是想着去修改数据,这些功能与套路有时会发挥很好的价值。

如果文章对你有启发,记得点个赞。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 聊一聊Vue组件模版,你知道它有几种定义方式吗?

    前端组件化开发已经是一个老生常谈的话题了,组件化让我们的开发效率以及维护成本带来了质的提升。

    六小登登
  • 如何更愉快地使用em

    CSS提供了很多种方式去定义一个值。大家最熟悉的可能也是最容易使用的就是像素(pixel),这被称做“绝对单位”。也就是说,5px在不同的场景下是一样的值。而其...

    六小登登
  • Vue2.5笔记:Vue中的模版

    我们在上一篇说到如何把 Vue 实例中的数据显示到视图中,就会需要用到我们的模版,我们只是简单的使用了一些,模版其实还有很多其他的特性。今天我们就来看看模版的其...

    六小登登
  • 《读书报告 – Elasticsearch入门 》----Part II 深入搜索(1)

    搜索不仅仅是全文本搜索:数据的很大部分是结构化的值例如日期、数字。这部分开始解释怎样以一种高效地方式结合结构化搜索和全文本搜索。

    用户1539362
  • Linux系统怎样上传下载文件

    宝塔安装方式:https://www.bt.cn/?invite_code=MV91a2pjZnQ=

    zeruns
  • DeepMind 提出分层强化学习新模型 FuN,超越 LSTM

    【新智元导读】在用强化学习玩游戏的路上越走越远的 DeepMind,今天发表在 arxiv上的最新论文《分层强化学习的 FeUdal 网络》引起热议。简称 Fu...

    新智元
  • 双11请来一堆科技巨头步道“智能制造”,天猫已在为十年后的电商布局

    双11的硝烟已经弥漫在每个角落——不只是互联网,还有线下实体;不只是内地市场,还有香港台湾等境外市场;不只是促销大战,而是在产品、体验、服务和物流等维度共同发力...

    罗超频道
  • Android开发-环境搭建-01

    1.1、由于Android是基于java语言的。所以在开发过程中,首先要做的事儿就是安装JDK。

    Hongten
  • 深圳scala-meetup-20180902(1)- Monadic 编程风格

    刚完成了9月份深圳scala-meetup,趁刮台风有空,把我在meetup里的分享在这里发表一下。我这次的分享主要分三个主题:“Monadic编程风格“、...

    用户1150956
  • Centos7搭建Kubernetes集群

    Kubernetes 及其整个生态系统(工具、模块、插件等)均使用 Go 语言编写,从而构成一套面向 API、可高速运行的程序集合,这些程序文档精良、易于参与贡...

    润森

扫码关注云+社区

领取腾讯云代金券