别再写究极三元表达式了，快来看看大佬是怎么写的

废话少说，直接看需求：

前端根据后端返回的数值进行相对于的回显，比如后端返1回显星期一，返2回显星期二，以此类推，无效回显空字符串。

第一种实现方法：究极三元表达式 (本人的反面教材)

<template>
    <view>
        <template v-for="(item, index) in dataList">
            <view>
                {{
                    item.id == 1 ? '星期一' : 
                    item.id == 2 ? '星期二' :
                    item.id == 3 ? '星期三' :
                    item.id == 4 ? '星期四' :
                    item.id == 5 ? '星期五' :
                    item.id == 6 ? '星期六' :
                    item.id == 7 ? '星期天' : ''
                }}
            </view>
        </template>
    </view>
</template>

很明显这种方式实现起来繁琐、可读性低、且代码冗余，要是后端后期要加更多状态(星期天，星期九...)难道还在后面一直加一直加吗？到时候这代码真就成屎山了，不可取。

第二种实现方式: switch 语句

<template>
    <view>
        <template v-for="(item, index) in dataList">
            <view>
                {{ filterDays(item.id) }}
            </view>
        </template>
    </view>
</template>
<script>
method:{
    filterDays(num){
        switch(num){
            case 1:
                return '星期一'
                break;
            case 2:
                return '星期二'
                break;
            case 3:
                return '星期三'
                break;
            case 4:
                return '星期四'
                break;
            case 5:
                return '星期五'
                break;
            case 6:
                return '星期六'
                break;
            case 7:
                return '星期天'
                break;
        }
    }
}

</script>

可以看出这种方式与第一种有'异曲同工'之妙，不过template代码简洁许多;像这样的还有if else 嵌套嵌套嵌套;下面来学习一下老大教我咋写的

第三种实现方式:全局方法+映射

1、在src文件夹中新建utils文件夹，utils文件夹中一般存放通用的辅助文件(方法、数据等)

2、创建util.js 文件

//util.js
function filterDay(map,code) {
    return map[code]
}
export { filterDay } 

map是一种映射关系，code是key值，map[code]就是value值

3、在main.js中导入这个方法并通过Vue.prototype注册成全局方法

//main.js
import { filterDay } from "@/utils/util.js"
Vue.prototype.$filterDayType = filterType

以后在vue任意一个地方都能通过$filterDayType来调用方法了

4、接着我们写映射关系 创建data.js(项目中存储公共常量的地方)我们这边用于存储映射

//data.js
    export const codeMapToState = {
        dayType:{
             1:'星期一',
             2:'星期二',
             3:'星期三',
             4:'星期四',
             5:'星期五',
             6:'星期六',
             7:'星期天',
        }        
    }

5、现在万事俱备，来去代码中看看怎么使用吧

<template>
    <view>
        <template v-for="(item, index) in dataList">
            <view>
                {{ $filterDayType(dayType.dayType,item.id) }}
            </view>
        </template>
    </view>
</template>
<script>
import { codeMapToState } from "@/data.js"
data(){
    return{
        dayType:codeMapToState
    }
}
method:{
   
    }
}

</script>

1、先导入codeMapToState这层映射关系

2、在data中注册一下（外部引入的变量是需要注册才能在本组件使用的，注册的名字自定义）

3、在template中调用刚刚注册的全局方法，传入定义好的映射关系，并把后端返的num作为key值一并传入，最后这个方法对应的返回值就会渲染到页面上

这样在项目中后端给到再多的状态，我只需要再原来基础上加key value就行; 要是有新的页面不同的状态，那就在下面再创一个映射关系，最后都是通过 codeMapToState.映射名 来使用的。

结语

如果你有更好的点子，欢迎留言

文中若有不准确或错误的地方，欢迎指出。