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>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
  
45
  
46
  
47
  
48
  
49
  
50
  
51
  
52
  
53
 

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

  

 

  
1
  
2
 

加过滤器后的显示效果

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

  

 

  
1
  
2
  
3
 

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/115489481