我怎样才能设计出vue中v-for的第一个元素的样式呢?

2022-02-25 00:00:00 vue.js nuxt.js

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

所示

相关文章