我如何样式的第一个元素的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类。

当然，但我想当点击其他按钮删除活动的第一个按钮，我使用它只有一个按钮有活动的样式按钮:焦点{背景颜色:$optional-red;颜色:# fff;}但是我想让第一个按钮的默认样式是

Answer 1

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

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

官方文档

Answer 2

我很确定你的btnIndex变量默认值为0。所以你可以应用条件类

:class="btnIndex == index ?'active':''"

Answer 3

完全不需要vuejs就可以做到这一点。使用简单的CSS。给按钮一个特殊的类，然后:

button.special {
color: blue
}
button.special:first {
color: red
}