Vue如何使用修改v-for循环中动态数组对应的变量值

Vue如何使用计算属性computed 和 过滤器filters修改v-for循环中动态数组对应的变量值

举个例子，在开发中你获取到的数组中的性别数据是英文的male 和 female，而要求是用中文显示

<div v-for='(v, i) in dataList'>
     <div>{{ v.gender }}</div>  
</div>

得到不是中文 // male female

可以使用计算属性或过滤器方法

方法一. 计算属性
把{{ v.gender }} 改为 {{ gender(v.gender) }}

computed: {
      gender() {
        return (value) => {
          return value=='male'?'男':'女';
        }
      },
},

方法二. 过滤器
把{{ v.gender }} 改为 {{ v.gender | gender}}

filters: {
    gender(val) {
          return value=='male'?'男':'女';
    }
}