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

本教程将介绍我怎样才能设计出vue中v-for的第一个元素的样式呢?的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

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

问题描述

我只想将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的第一个元素的样式呢?的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。