从架构层次给vue项目添加 filter

1.在src 文件夹下 新建文件夹 filters （和pages,components同层级）

 

 

 

2.在filters 文件夹下 新建 index.js和 demo.js (demo可自定义名称,真实项目应该是 dateformat)

 

3.在deteformat.js里面 创建自己的自定义的时间戳处理方法

/**
 * Created by Xu Ning on -2021/06/23.
 */
// 接口返回 20210623  且是字符串  处理成 YYYY年MM月DD日
import moment from 'moment'
export default function (dataStr, pattern = 'YYYY年MM月DD日', defaultVal = '-') {
  // 不管是字符串还是数字 都变成字符串处理
  let tmp = dataStr + '' // 时间戳转为字符串
  if (tmp) {
    return moment(tmp).format(pattern)
  }
  return defaultVal
}
//设置初始值 和默认处理格式 还有默认返回值-

4.在index.js里 导入vue 并到全局Js里引用改index.js 即可

import dataformat from './dateformat'
import dataformat1 from './dateformat1'
import Vue from 'vue'

Vue.filter('dateformat', dataformat)
Vue.filter('dateformat1', dataformat1)

5.在全局入口引入 对应src下面的 filters根文件夹下的index.js

此处省略

6.vue文件夹下如何使用demo

<div class="news-brif" @click="bugLastestInfo">以上信息为截至{{lastBuyedDate|dateformat1}}的{{lastBuyedYear}}财年信息，目前有截至{{lastedInfoDate|dateformat1}}的{{lastedInfoYear}}财年信息，<strong>点击购买</strong>。</div>