Vue：过滤器filter的使用方式

app.vue

  
    
      
        {{item.name}}
         - 
        {{item.role | roleValueToLabel}}
      
    
  



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];
    },
  },
};

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

加过滤器后的显示效果

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