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

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

过滤器的作用:

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

使用场景:

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

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

如何实现:

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

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

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

 filters: {
    filterPrice (price) {
      return price ? ('¥' + price) : '---'
    }
  }
相关推荐
FRing031 小时前
JavaScript入门到精通三十二(深拷贝、浅拷贝、递归函数)
开发语言·前端·javascript
兰亭妙微UI设计公司3 小时前
兰亭妙微ui设计公司分享:B端组件命名如何支持团队协作
前端·javascript·vue.js
小大宇4 小时前
Vue知识点-ElementPlus-03提示框+询问+通知
前端·javascript·vue.js
前端技术官4 小时前
前端的技术判断力是怎么练出来的?
javascript·web前端·localstorage·debounce·弱网处理
程序员大阳6 小时前
副队长JavaScript教程(60)-BOM 初识:window 对象与浏览器模型
javascript·bom·window对象·浏览器模型
web打印社区6 小时前
Chrome-kiosk-printing能上生产吗
开发语言·前端·javascript·chrome·websocket
潇小墨6 小时前
我给自己造了一个桌面效率助手:剪贴板、截图提单、全盘文件搜索,全都塞进快捷键里
vue.js
志尊宝6 小时前
AI原生前端开发(041):AI辅助的状态管理(Zustand/Pinia)
前端·javascript·ai-native
Geoffwo7 小时前
DSH-SKILL基础
javascript
AI副业搞钱研究所7 小时前
用 12 组正则写一个骗局话术检测器:权重打分、硬红旗保底和高亮区间合并
javascript