vue中,如何将以下代码简洁化?

if(this.imgData){
            let currtNUm = this.imgData.length
            let needNum = 0
            if(currtNUm === 4){
                needNum = 0
            }
            if(currtNUm === 3){
                needNum = 1
            }
            
            if(currtNUm === 2){
                needNum = 2
            }
            
            if(currtNUm === 1){
                needNum = 3
            }
            
            
            for (var i = 0; i < (this.imgData).length; i++) {
                if(value === this.imgData[i].value){
                        this.subsidiaryPic[needNum].url = this.imgData[i].url
                        this.imgData.splice(i,1)
                }
            }
        }

如上所示,业务逻辑就是这样,功能都实现了,但是代码太乱太长了,想要优化下,
小弟先谢谢各位大神们的解答!感激不尽!

阅读 1.7k
3 个回答

可以通过使用计算属性和更简洁的条件语句来简化这段代码。这是一个简化后的版本:

computed: {
  needNum() {
    return this.imgData ? 4 - this.imgData.length : 0;
  }
},
methods: {
  updateSubsidiaryPic(value) {
    if (this.imgData) {
      const index = this.imgData.findIndex(item => item.value === value);

      if (index !== -1) {
        this.subsidiaryPic[this.needNum].url = this.imgData[index].url;
        this.imgData.splice(index, 1);
      }
    }
  }
}

首先,我们在Vue实例中创建一个计算属性needNum,该属性将根据this.imgData的长度返回相应的值。接下来,将之前的逻辑封装到一个名为updateSubsidiaryPic的方法中。在这个方法中,我们使用findIndex函数来查找与给定值匹配的元素。如果找到了匹配的元素,我们就更新subsidiaryPic数组,并从imgData中移除该元素。这样,我们的代码变得更简洁且易于理解。

needNum=4-currtNum 不就可以了

if (this.imgData) {
  let currtNUm = this.imgData.length;
  let needNum = 4 - currtNUm;
  for (var i = 0; i < this.imgData.length; i++) {
    if (value === this.imgData[i].value) {
      this.subsidiaryPic[needNum].url = this.imgData[i].url;
      this.imgData.splice(i, 1);
    }
  }
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题