很久没有更新,先聊一聊近况吧,5月底从上家公司离职了(任职时长两个多月),然后休息了几天入职了现在这家公司,离职的原因有很多,我也犹豫很久才做出的决定,但是后来想通释怀了。目前的工作也稍微上手了点,项目开发和管理也很规范,在这里沉淀一段时间,应该能够让自己收获一些以前缺失的。但不管环境如何变好变坏,只有坚定向前的步伐才是唯一正确的路。
最近在看项目代码的时候,看到table渲染中出现这样的写法
<template>
{{ row.create_time | formatDate }}
</template>
我以前没有用过这种写法,但从上下文得知row.create_time
应该是参数,formatDate
是函数,于是我找了一下关键词formatDate
,看到vue的配置项里面有这样一段内容
filters: {
formatDate(time) {
// 转换时间戳
time = time * 1000
const date = new Date(time)
//省略几行
return date
}
}
看到这个filters我就想起来,曾在vue的官方文档里面有看到过滤器的相关介绍,感觉这种写法很整洁规范,便仔细看了文档的内容。
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。
所以,出了上面叙述的插值表达式写法,还可以用在v-bind
指令上
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
除此之外,filters过滤器还可以串联。filterA
接收的参数是message
,filterB
接收的参数是过滤器filterB
的返回值,过滤两层。(被这种排火车的写法戳中萌点...)
{{ message | filterA | filterB }}
最后,过滤器作为JavaScript函数,还可以接收出了过滤对象之外的其他参数。
{{ message | filterA('arg1', arg2) }}
在上述表达式中,filterA
将接收三个参数,第一个是message
,普通字符串'arg1'
作为第二个参数,表达式arg2
的值作为第三个参数。