如何在 vue 中设置 v-for 的第一个元素的样式？

Question

我想将一个active类设置为此代码中的第一个按钮：

<button
  class='optional-red-outlined-btn'
  v-for="(item, index) in faq"
  :key="item._id"
  @click="btnIndex = index"
>
  {{ item.question }} 
</button>

这意味着当页面加载时，如果其中有 4 个按钮，那么第一个按钮应该有optional-red-outlined-btn类和active类，而其他的只有optional-red-outlined-btn类。

当然，但我想当点击其他按钮时删除第一个按钮的活动，我只将它用于一个按钮有活动样式 button:focus{ background-color: $optional-red; 颜色：#fff; 但我想在默认的第一个按钮有这种风格

Answer 1

您可以根据以下条件创建动态类

:class="{ active: index === 0 }"

如官方文档所示