javascript - 如何在 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 }"

如official documentation所示