vue项目更关于if-else的优化问题

Question

按钮有三种状态,状态1,状态2,状态3,
一共头五组数据,
data:{

"a":{
    "type":1,
    "state":1
},
"b":{
    "type":1,
    "state":1
},
"c":{
    "type":1,
    "state":1
},
"d":{
    "type":1,
    "state":1
},
"e":{
    "type":1,
    "state":1
},

}
我现在是if(type==1){

if(state == 1){
    return '状态1'
}else if(state==2){
     return '状态2'
}else if(state ==3){
  return '状态3'    
}

}else if(type==2){

if(state == 1){
return '状态1'
}else if(state==2){
return '状态2'
}else if(state ==3){
 return '状态3'
}

} .....以下省略
请问有没有更好的方法解决if else 的问题

Answer 1

我的思路比较骚。实际上你可以好好利用对象的属性。

// 首先定义所有状态
let stateMap = {
    1: {
        1: '抽烟',
        2: '喝酒',
        3: '烫头'
    },
    2: {
        1: '洗',
        2: '剪',
        3: '吹'
    },
    ... // 太懒我略过了
}
// 渲染的时候这么用
stateMap[type][state]

Amazing！就是这么神奇。

Answer 2

类似的处理，直接将状态信息封装成一个数据结构。比如你的需求，可以将状态封装成一个数组
var stateList = ['状态1', '状态2', '状态3']
取值直接是stateList[state]即可

Answer 3

无论是使用过滤器还是建立一个方法都行
`
getState(state){

let stateMap={
    1:'状态1',
    2:'状态2',
    3:'状态3',
    4:'状态4',
    5:'状态5',
}
return stateMap[state] || ''

}
`