VueJs - 过滤器

前言

在接触ElementUI学习Vue的过程中，有看到关于过滤器(filters)的使用。在此对过滤器的使用做个总结，以备自己和供他人参考。

Vue官方介绍

Vue.js 允许自定义过滤器，可被用于一些常见的文本格式化。

过滤器可以用在两个地方：双花括号插值 和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。

过滤器应该被添加在 JavaScript 表达式的尾部，由 “管道” 符号指示。

过滤器使用格式： {{ message | filter }}。

Vue官方示例：

<!-- 在双花括号中 -->
{{ message | capitalize }} 

<!-- 在 `v-bind` 中 --> 
<div v-bind:id="rawId | formatId"></div>

项目应用

通过 双花括号插值 方式将时间戳转换为自定义时间。 v-bind 表达式 方式未作尝试，后续可以补充。

• 方式一：main.js 中定义全局过滤器

Vue.filter('dateFormat', function(originVal) {
  const dt = new Date(originVal)
  const y = dt.getFullYear()
  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
  const d = (dt.getDate() + '').padStart(2, '0')
  const hh = (dt.getHours() + '').padStart(2, '0')
  const mm = (dt.getMinutes() + '').padStart(2, '0')
  const ss = (dt.getSeconds() + '').padStart(2, '0')

  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})

组件中应用

<el-table-column label="创建时间" prop="create_time"">
  <template slot-scope="scope">
    {{ scope.row.create_time | dateFormat}}
  </template>
</el-table-column>

效果展示

• 方式二：组件选项中定义过滤器

使用方式与效果图与方式一相同。

注意事项

Vuejs官方文档中有提到一点：当全局过滤器和局部过滤器重名时，会采用局部过滤器。