Question

我正在做的是从名为items的数组中迭代一个列表，并且在每次迭代时它运行一个获取item.painted的函数，如果它等于某个颜色，它将设置{{1} }设置为该颜色，然后将列表迭代中的loopColor设置为跨度loopColor样式。

一切正常，没有任何错误，但是颜色并没有真正改变。

color

Answer 1

您的switch语句语法有问题。

使用您的getColor方法：

getColor: function(color) {
    switch (color) {
      case color === 'pink':
          this.loopColor = 'pink'
          return true
        break;
      default:

    }
  }

您的case语句不正确。

case color === 'pink':

应该是：

case 'pink':

请参阅此工作的JS小提琴：https://jsfiddle.net/eywraw8t/299194/

Answer 2

您可以使用

      {{ item.name }}
      <span :style="{'color': getColor(item.painted)}">
        {{ item.painted }}
      </span>

或更妙的是，为了防止以这种方式在模板中使用函数，最好还是更新数据或使用其他变量。

      {{ item.name }}
      <span :style="{'color': getColor(item.myHexColor)}">
        {{ item.painted }}
      </span>

myHexColor在渲染前已添加到项目中

在列表迭代期间设置<span>颜色

2 个答案: