vue中，如何将以下代码简洁化？

作者站长头像
站长
· 阅读数 5
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个回答
avatar
test
2024-07-06

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

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中移除该元素。这样，我们的代码变得更简洁且易于理解。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容