如何使用 css 和 vue.js 查找表格行的元素？答案

【问题标题】：How to find element of table row with css and vue.js?如何使用 css 和 vue.js 查找表格行的元素？
【发布时间】：2019-06-02 06:21:12
【问题描述】：

我希望其他每一行都为灰色，但在以下示例中 - 所有行都变为灰色。

  <table>    
    <tr v-for="i in item.env_vars" :style="{'background': index % 2 === 0 ? '#eee' : '#ccc' }">
      <td> test1 </td>
      <td> test2 </td>
      <td> test3 </td>
    </tr>
  </table>

我在 vue 管理工具中看到了这个错误：

Property or method "index" is not defined on the instance but referenced during render.

我的代码有什么问题？

【问题讨论】：

如何创建多个<tr>s？答案取决于此。您当前的代码只有一个<tr>
这里没有for循环所以我不明白你从哪里得到index

标签： javascript html css vue.js

【解决方案1】：

我不熟悉 vue，但我认为您需要在循环中添加一个 index 变量：

<tr v-for="(i, index) in item.env_vars"

【讨论】：

【解决方案2】：

您可以使用简单的nth-child 规则来做到这一点：

table {
  width: 100%;
}

tr:nth-child(odd) {
  background: #eee;
}

tr:nth-child(even) {
  background: #ccc;
}

<table>
  <tr>
    <td>hi</td>
  </tr>
  <tr>
    <td>hi</td>
  </tr>
  <tr>
    <td>hi</td>
  </tr>
  <tr>
    <td>hi</td>
  </tr>
</table>

【讨论】：

由于我正在从事的项目的一些限制，我无法做到这一点。 css 需要每个 vue 组件 - 这就是我尝试以编程方式创建它的原因。