vue 2.0 自定义filter并挂载到全局使用

date
Dec 30, 2016
slug
vue2.0-custom-filter-to-global
status
Published
tags
develop
vue
summary
vue 2.0 开始,取消默认filter, 需要自定义。
type
Post
vue 2.0 开始,取消默认filter, 需要自定义。
而自定义之后每次在需要使用的组件内引用也确实蛮麻烦的。
所以我们就来将定义的filter挂载到全局使用。
  • 定义
  • 引用
  • 挂载
  • 使用
/src/filters/
  • format.js
exportdefaultfunction(val){
    ...
}
  • index.js
import formatfrom "./format";

exportdefault{
  format: format,
}
/src/
  • main.js
...

import commonFiltesfrom './filters/index'

Object.keys(commonFiltes).forEach(function (key, index, arr) {
  Vue.filter(key, commonFiltes[key]);
})

...
/src/components/
  • xxx.vue
<template>
...
<div>{{ data | format }}</div>
</template>
<script>
...
</script>

© Hivan Du 2021