vue 用,有时候直接使用后台传过来的数据不能满足我们的要求,比如分别用 1,2,3,4代表不同的类型,我们需要对这些数据进行翻译,翻译成我们想要的结果,这种可以用vue的filters 来实现;

vue 的 filters 还有一种是全局配置的,这里不做介绍;

<template>
    <ul>
        <li v-for = "ele in result">
            <!--这里将 ele.type 的值当作参数传入translate-->
            {{ele.type | translate}}
        </li>
    </ul>
</template>
<script>
export default {
    name: 'Filters',
    data() {
        return {
            result: [
                {
                    id: 1,
                    type: 1,
                }, {
                    id: 2,
                    type: 2,
                },
                {
                    id: 3,
                    type: 3,
                }, {
                    id: 4,
                    type: 4,
                }
            ]
        };
    },
    filters: {
        translate(type) {
            let res = '';
            switch (type) {
                case 1:
                    res = '王者荣耀';
                    break;
                case 2:
                    res = '英雄联盟';
                    break;
                case 3:
                    res = '刺激战场';
                case 4:
                    res = 'QQ飞车';
                default:
                    res = '位置类型';
            };
            return res;
        }
    }
};
</script>

说实在的,这个时候,computed不能传参,methods 也不能用,filters 是不错的选择