我怎样才能设计出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
类。
当然,但我希望在单击其他按钮时移除激活的第一个按钮,我只将它用于一个按钮具有活动样式按钮:Focus{Background-color:$Optional-red;color:#fff;}但我希望默认情况下第一个按钮具有此样式
解决方案
您可以基于以下条件创建动态类:
:class="{ active: index === 0 }"
如official documentation
所示相关文章