迭代时没有得到不同的 class 名称

Question

我的 vuejs 应用程序中有一个 v-for 循环。我希望每个跨度都有不同的 class 名称。例如.spa0, .spa1, .spa3..... 我如何在 v-for 循环中使用索引？

我试过这样的事情：

 :class="`spa${index}`"

我的一些代码是：

<div>
<span v-for="(t, index) in table_data" :class="`spa${index}`">{{t}}</span>
</div>

我希望每个跨度都有不同的 class。

Answer 1

如果table_data就像你在评论中所说的那样：

{
  type: 'LDAP',
  des: 'LDAP for Demo - Do not edit or delete this App',
  api: 'show token',
  scim: 'cloud.kapstonellc.com:8082/scim/v2/10VN44ZN',
  endis: true,
  act: true
}

您可能应该遍历 table_data 个键：

<div>
  <span v-for="(key, index) in Object.keys(table_data)" :class="`spa${index}`">
    {{ table_data[key] }}
  </span>
</div>

迭代时没有得到不同的 class 名称

Not getting different class names while iterating

vue.js

v-for