vue面试题:过滤器的作用,如何实现一个过滤器

过滤器的作用,如何实现一个过滤器

过滤器的作用:

根据过滤器的名称,过滤器是用来过滤数据的,在Vue中使用filters来过滤数据,filters不会修改数据,而是过滤数据,改变用户看到的输出(计算属性 computed ,方法 methods 都是通过修改数据来处理数据格式的输出显示)。

使用场景:

需要格式化数据的情况,比如需要处理时间、价格等数据格式的输出 / 显示。

比如后端返回一个 年月日的日期字符串,前端需要展示为 多少天前 的数据格式,此时就可以用fliters过滤器来处理数据。

如何实现:

过滤器是一个函数,它会把表达式中的值始终当作函数的第一个参数。过滤器用在插值表达式 {{ }} 和 v-bind 表达式 中,然后放在操作符" | "后面进行指示。

例如,在显示金额,给商品价格添加单位:

javascript 复制代码
<li>商品价格:{{item.price | filterPrice}}</li>

 filters: {
    filterPrice (price) {
      return price ? ('¥' + price) : '---'
    }
  }
相关推荐
程序员初一11 分钟前
我把跑了两年 WordPress 的机器重装了一遍,顺便把面板卸了
javascript
kyriewen22 分钟前
别再用防抖做懒加载了:120 张图只加载出 4 张
前端·javascript·程序员
CodeMi2 小时前
2026 CSS 接管了这些 JS 的活:6 个 Baseline 特性的落地取舍
javascript·css
康小旺3 小时前
AI 写 Vue 总写成同一个味道:给它装 Skills,装的不是知识是边界
vue.js·typescript
全栈项目管理程序猿3 小时前
ArcGIS JS 基础教程(35):体元系列 - VoxelLayer 时间维度动画
前端·javascript
徐小夕4 小时前
JitKnow AI知识库 4.7 发布|多文档推理+拖拽 Agent + 技能库,打造更懂业务的 AI 知识中台
前端·vue.js·github
小poop5 小时前
从“雷峰塔”到“对象”:JavaScript基础语法入门指南
前端·javascript
chunyublog5 小时前
HDFS 上传文件名空格问题排障教程
前端·javascript·npm
FRing037 小时前
JavaScript入门到精通二十九(内置构造函数(Object、Array))
开发语言·前端·javascript
天才熊猫君7 小时前
前端队列,我是怎么从 `push + shift` 换成游标的
前端·javascript