Vue：过滤器filter的使用方式

app.vue

<template>
  <div>
    <template v-for="item in list">
      <div>
        <span>{{item.name}}</span>
        <span> - </span>
        <span>{{item.role | roleValueToLabel}}</span>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: '',

  data() {
    return {
      list: [
        {
          name: 'Tom',
          role: 1,
        },
        {
          name: 'Jack',
          role: 0,
        },
        {
          name: 'Steve',
          role: 2,
        },
      ],
    };
  },

  filters: {
    /**
     * 将数字值转换为显示文本
     */
    roleValueToLabel(value) {
      const mapping = {
        0: '普通用户',
        1: '付费用户',
        2: '超级用户',
      };
      return mapping[value];
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

# 单文件开发模式启动
$ vue serve

加过滤器后的显示效果

Tom - 付费用户
Jack - 普通用户
Steve - 超级用户