Vue通过过滤器filters实现对后端返回的集合对象中的字段进行判断显示对应的值

        前情提要：今天需要在前端展示一栏数据，然后我希望后端返回一个List<Object>的集合对象为

[{assetType："中文1"，count：1},{assetType："中文2"，count：2}]

这种类型，

但是他给我的是

[{assetType："T01"，count：1},{assetType："T02"，count：2}]

这让我一个后端java开发我直接懵了，要是我搞后端我直接改一下就好了，但是他不太愿意改，就算了，想着不改我就自己在前端处理嘛，这样又学习一个前端知识，岂不美哉。

于是我又去问我的十年前端大佬，他直接给我说用vue的过滤器并且给我了一个链接过滤器 — Vue.js

看了以下，确实挺好用的，这下不久学到了吗？

那么下面就来看我的实战代码

html

<HomeCode
          v-for="v in arr"
          :key="v.id"
          :title="v.assetType | formatAssetType"
          :num="v.count">
</HomeCode>

filters

/**
   * 过滤器
   * */
  filters: {
    formatAssetType (val) {
      if (val === 'T01') {
        return "综合报表"
      }
      if (val === 'T02') {
        return "自助查询"
      }
      if (val === 'T03') {
        return "管理驾驶舱"
      }
      if (val === 'T04') {
        return "业务场景"
      }
      if (val === 'T05') {
        return "宽表模型"
      }
      if (val === 'T06') {
        return "数据指标"
      }
      if (val === 'T07') {
        return "数据标签"
      }
      if (val === 'T08') {
        return "补录数据"
      }
      if (val === 'T09') {
        return "数据集市"
      }
      if (val === 'T10') {
        return "数据模型"
      }
    }

这不效果就出来了。

 效果杠杠的。

刚才那个链接写的特别清晰明了确实很好用。