Vuejs用数组计算属性答案

【问题标题】：Vuejs computed properties with arrayVuejs用数组计算属性
【发布时间】：2019-11-14 14:56:37
【问题描述】：

我有以下组件：

data() {
   return {
     cars: []
   }
}

我需要为每辆车设置颜色：

<div v-for="car in cars">
   <span :color="setColor"></span>
</div>

如何使用计算属性为每辆车设置特定颜色？我必须在函数中使用特定的逻辑：

if (car == 'a') {
  return 'black'
} else if (car == 'b') {
  return 'blue'
}

【问题讨论】：

标签： vue.js

【解决方案1】：

您不应该使用计算属性，而是使用方法，因为它需要接收参数（即car 变量）。一些提示：

由于它在技术上是一个获取值，也许getColor() 将是一个更合适的名称
在适当的时候始终使用===

methods: {
  getColor(car) {
    if (car === 'a') {
      return 'black'
    } else if (car === 'b') {
      return 'blue'
    }
  }
}

然后你可以在模板中这样使用它：

<div v-for="car in cars">
   <span :color="getColor(car)"></span>
</div>

【讨论】：

【解决方案2】：

因为您不能将参数传递给computed 函数，所以您需要获取所有颜色数组或改用method。

解决方案1：获取所有颜色的列表。

<div v-for="(car, index) in cars">
   <span :color="carColors[index]"></span>
</div>
...
computed: {
  carColors() {
    return this.cars.map(car => car === 'a' ? 'black' : 'blue');
  }
}

解决方案 2：使用方法代替 @Terry 的答案。


<div v-for="car in cars">
   <span :color="getColor(car)"></span>
</div>
...
methods: {
  getColor(car) {
    if (car === 'a') {
      return 'black'
    } else if (car === 'b') {
      return 'blue'
    }
  }
}

【讨论】：

【解决方案3】：

我希望汽车对象上有类似color 属性的东西。如果是这样，则不需要计算属性，可以使用以下 sn-p：

<div v-for="car in cars">
   <span :color="car.color"></span>
</div>

但是，您的代码似乎比您所描述的问题更多。 span 是一个原生 HTML 元素，据我所知，它没有 color 属性，就像您的代码似乎假设的那样。

此外，您的 cars 数据属性是一个空数组，因此循环它不会很好地工作。你需要这样的东西来使之前的 sn-p 工作（如果我们忘记了span 问题）：

data() {
   return {
     cars: [
       { color: 'red' },
       { color: 'blue' }
     ]
   }
}

更新：

您不需要为此使用计算属性，您可以使用方法：

<div v-for="car in cars">
   <span :color="getColor(car)"></span>
</div>

methods: {
  getColor(car) {
    if (car === 'a') {
      return 'black'
    } else if (car === 'b') {
      return 'blue'
    }
  }
}

【讨论】：

刚刚更新了我的问题。我不能使用汽车的颜色属性。

【解决方案4】：

你应该使用方法，而不是计算变量，因为它有一个参数（汽车的 id 左右）

创建一个名为setColor的方法

setColor(car) {
     if (car === 'a') {
        return 'black'
      } else if (car === 'b') {
     return 'blue'
 }
},

【讨论】：