vue 过滤器filter封装和使用

新建index.js文件

export function addData (val){
  val += '我是追加的数据'
  return val
}

main.js中引入

import * as filter from './filter'

//循环注册过滤器

Object.keys(filter).forEach(key => {
  Vue.filter(key, filter[key])
})

.vue文件中使用

<template>
  <div class="index-container">
    <el-row align="middle" justify="center">
      <el-col :span="24" :offset="0" class="position">
        <div class="center">
          {{testData|addData}}
        </div>
        <img class="center" src="../../../static/index-center.png" alt="">
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "index1",
  data() {
    return {
      testData:'我是原始数据 | '
    };
  }
};
</script>

效果图