我怎样才能设计出vue中v-for的第一个元素的样式呢？ [英] How can I style the first element of a v-for in vue?

问题描述

我只想将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类。

当然，但我希望在单击其他按钮时移除激活的第一个按钮，我只将它用于一个按钮具有活动样式按钮：Focus{Background-color：$Optional-red；color：#fff；}但我希望默认情况下第一个按钮具有此样式

推荐答案

您可以基于以下条件创建动态类：

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

如official documentation

所示

这篇关于我怎样才能设计出vue中v-for的第一个元素的样式呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！