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

按钮有三种状态,状态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 的问题

阅读 490
评论
    3 个回答

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

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

    Amazing!就是这么神奇。

      • 135

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

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

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

        }
        `

          撰写回答

          登录后参与交流、获取后续更新提醒

          相似问题
          推荐文章