Vue.js简化es5的代码

Question

像这样的if判断代码在vue里面显得过于臃肿，该怎么优化if语句？

methods: {
  next() {
    if (this.cateDatas.caijing != '') {
      if(this.cateDatas.redian != '') {
        if(this.cateDatas.hangye != '') {
          if(this.cateDatas.youhui != '') {
            if(this.cateDatas.diyu != '') {
              this.id++;
            } else {
              alert("请选择地域信息！")
            }
          }  else {
            alert("请选择优惠政策！")
          }
        }  else {
          alert("请选择行业资讯！")
        }
      }  else {
        alert("请选择热点聚焦！")
      }
    } else {
      alert("请选择财经新闻！")
    }
  }
}

Answer 1

//原始数据
const cateDatas = {
    caijing: '22',
    redian: ''
}
let id = 0;


//配置数据
const config = {
    caijing: '请输入财经新闻！',
    redian: '请输入热点聚焦！',
}

if (Object.keys(cateDatas).every(v => cateDatas[v] != '' ? true : alert(config[v]))) {
    id++;
}

Answer 2

用return

if (this.cateDatas.caijing === '') {
    alert('请选择财经新闻')
    return
}
if (this.cateDatas.redian === '') {
    alert('请选择热点')
    return
}
...
this.id++

Answer 3

一点儿想法，希望能对你有所帮助！

next(){
     var data_buff = {
         "caijing":"财经新闻",
         "redian":"热点聚焦",
         "hangye":"行业资讯",
         "youhui":"优惠政策",
         "diyu":"地域信息"
     };
     var flag = true; //决定是否进行id增加的标志
     for( k in data_buff ){
        if(this.cateDatas[k] == '') {
            flag = false;                
            alert("请选择" + data_buff[k] + "！");
            break;
        }
     }
     if(flag) {
         this.id++;
     }
 }

当然还可以改写为ES6的方式，更为简单简洁，不过这样应该好理解一些！

Answer 4

定义一个数组将要判断的属性存储，然后forEach遍历数组判断

Answer 5

(this.cateDatas.caijing || alert("请选择地域信息！")) &&
(this.cateDatas.redian || alert("请选择优惠政策！")) &&
(this.cateDatas.hangye || alert("请选择行业资讯！")) &&
...

Answer 6

methods: {
  next() {
    if (!this.cateDatas.caijing) return "请选择财经新闻！";
    if (!this.cateDatas.redian) return "请选择热点聚焦！";
    if (!this.cateDatas.hangye) return "请选择行业资讯！";
    if (!this.cateDatas.youhui) return "请选择优惠政策！";
    if (!this.cateDatas.diyu) return "请选择地域信息！";

    this.id++;
  }
}