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

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

过滤器的作用:

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

使用场景:

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

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

如何实现:

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

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

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

 filters: {
    filterPrice (price) {
      return price ? ('¥' + price) : '---'
    }
  }
相关推荐
Dxy123931021624 分钟前
JS DES 加密详解
开发语言·javascript·arcgis
充值内卷24 分钟前
我给桌面加了个鱼缸:C++ 写后端,WebView2 里养一座 Three.js 小岛
开发语言·javascript·c++
椒哥3 小时前
一天被问几十次"允许",我统计了 517 次,然后写了个插件
前端·javascript·github
kyriewen3 小时前
我测了 6 种防请求竞态的写法:只有 1 种真能打
前端·javascript·程序员
OpsEye4 小时前
企业大模型压测,需要重点关注哪些指标?
javascript·ai编程
LuHang5 小时前
从天地图切换到高德地图:一次真实的底图迁移实战
前端·vue.js·cesium
像我这样帅的人丶你还5 小时前
我html生成的doc文档为何在手机文档显示不了图片?
前端·javascript
ruanno_top8 小时前
Vue 3 后台权限路由:我漏掉了按钮级裁剪,还把 403 写成了 404
vue.js
栉甜9 小时前
Vue2学习内容(上)
前端·javascript·vue.js·学习
shmily麻瓜小菜鸡10 小时前
TypeScript 知识点补充(第三部分:工程化与高级类型)
前端·javascript·typescript