Question

我在这里做错了什么？没有错误-通过开发工具查看时也没有应用样式。

<!-- Template -->
<td v-for="steps in item.steps" v-bind:style="steps.name">
 {{ steps.name }}
</td>

// Component definition
computed: {
  endstage() {
    return {
      'background-color': '#f9f9f9',
    };
  }
}

steps.name会打印，如果我将类绑定到可以工作的steps.name，则-不确定尝试绑定样式时我做错了什么。

更新：

在我的模板中，我还使用了运行良好的示例：

<!-- Template -->
<table :style="tableStyle">

// Component definition
computed: {
  tableStyle() {
    return {
      'background-color': '#f9f9f9',
      'border-color': '#C0C0C0',
      'padding': '8px',
      'color': 'red',
      'width': '100%',
      'display': 'table',
      'border': '1px solid #ddd',
    };
  }
}

那么为什么我不能使用td对steps.name进行同样的操作，在此示例中会导致'endstage'？

Answer 1

模板的输出将如下所示：

<td style="endstage">
  endstage
</td>

我假设这不是您想要的，因为endstage不是style属性的有效值。请注意，此处完全不使用计算属性。它只是试图将样式设置为字符串'endstage'。

我猜你想做什么？

<td v-for="steps in item.steps" :style="this[steps.name]">

假设steps.name为'endstage'，这将使用计算属性endstage返回的对象作为样式。 this[steps.name]的值为this['endstage']，即this.endstage。

这不是一个很好的策略，因为它假定所有名称都将具有自己的计算属性。

如果endstage是您唯一关心的名称，则可以执行以下操作：

<td v-for="steps in item.steps" :style="steps.name === 'endstage' ? endstage : null">

如果还有其他方法，则最好使用一种方法：

<td v-for="steps in item.steps" :style="getStyle(steps.name)">

具有：

methods: {
  getStyle (name) {
    switch (name) {
      case 'endstage':
        return {'background-color': '#f9f9f9'}
      // Other cases here
    }
  }
}

Answer 2

它必须是v-bind而不是v:bind。

在此示例中，如何将样式绑定到v-for循环？

2 个答案: