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

我想将一个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; 但我想在默认的第一个按钮有这种风格

回答

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

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

如官方文档所示


以上是如何在vue中设置v-for的第一个元素的样式?的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>