Question

我正在尝试为表格中的所有奇数行添加样式。但是下面的示例失败了。

template: `
<div container>
  <h3>test title</h3>
  <table :style="overviewStyle">
  <div :class="emptyDiv" v-for="item in testlist">
   <tr>
      <td :style="{'tdStyle': index % 2 === 0, 'tdGray': index % 2 !== 0 }">[[ item.result ]]</td>
   </tr>
  </div>
  </table>
</div>
`,

computed: {
  tdStyle() {
    return {
        'border': '1px solid #C0C0C0',
        'padding': '8px',
    };
  },
  tdGray() {
    return {
        'background-color': gray,
    };
  },

对我来说有趣的是，该示例可用于类。

<td :class="{'tdStyle': index % 2 === 0, 'tdGray': index % 2 !== 0 }">[[ item.result ]]</td>

因此可以使用：class但不能使用：style。

如果没有更简单的解决方案，是否有办法将这个逻辑移到函数中，然后调用该函数为奇数行着色？

Answer 1

您可以在纯CSS中做到这一点。绝对没有理由将其放入条件代码或JavaScript中，这使得维护起来更加困难。 Vue可以将HTML模板，JSS和CSS组合成组件，但是我在这方面不是专家。

.zebra tr:nth-child(even) {
  background: #eee;
}
.zebra tr:nth-child(odd) {
  background: #ccc;
}

<table class="zebra">
  <tr><td>foo
  <tr><td>bar
  <tr><td>baz
  <tr><td>fizz
  <tr><td>buzz
</table>

关于具体为什么代码无法正常工作的问题，vue使用:class有条件地添加类。将JavaScript对象传递给:class时，每个键都被理解为一个类名，如果其值为true，则显示该类名。

:style属性具有不同的特殊行为，其中传递的对象的每个键都是CSS属性。例如，如果您想始终在元素上设置属性，但其值是有条件的，则此功能很有用。

您的代码将:style用于非CSS属性。

<td :style="{'tdStyle': index % 2 === 0, 'tdGray': index % 2 !== 0 }">

如果您想在不设置CSS类的情况下使用它，则需要执行以下操作。自从我还没有做起就已经有一段时间了，我强烈建议不要在HTML属性中加入这种逻辑。

<td :style="{'background': index % 2 === 0 ? '#eee' : '#ccc' }">

最后，您的代码甚至不是在表中带有div的有效HTML，这肯定会引起问题，因为浏览器不知道将div放在哪里以及将tbody放在哪里。

Answer 2

虽然前面提到的答案是肯定的，但是您可能可以使用纯CSS（也是更好的IMO）来做到这一点，只是想回答有关class绑定为何有效而style无效的问题。< / p>

如果您查看Vue docs，将会发现样式的语法不正确。对于课堂，您所拥有的是正确的，它应该看起来像这样：

<div :class="{ active: isActive }"></div>

但是，对于绑定样式，实际上必须将CSS样式作为对象返回：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

因此，在您的情况下，样式对象将变为此对象（假定为偶数索引）：

{
  tdStyle: true,
  tdGrey: false
}

这显然不是有效的CSS。如果要实际放置函数的值，建议您在ES6中使用散布运算符进行对象分解，对于更简洁的代码，也请使用JS三元运算符：

<td :style="{ index % 2 === 0 ? ...tdStyle : ...tdGray }">

或者，如果您不想添加更多样式，则可以完全省略对象语法，并使用以下语法：

<td :style="index % 2 === 0 ? tdStyle : tdGray">

在这里，基本上发生的绑定是说“如果索引是偶数，则返回tdStyle函数的结果，否则返回tdGray函数的结果”。

但是，当然，正如前面提到的，CSS是这里的高级解决方案。如果您确实想添加CSS无法提供的某些特殊样式，则最好还是使用class绑定而不是style，那样CSS可以放在style标签内组件的

：

<td :class="index % 2 === 0 ? 'tdStyle' : 'tdGray'">

在此vue.js示例中，如何为表格中的奇数行设置样式？

2 个答案: