javascript - How can I style the first element of a v-for in vue? - Stack Overflow

admin管理员组

文章数量:1406937

I want to set an active class just to first button in this code:

<button
  class='optional-red-outlined-btn'
  v-for="(item, index) in faq"
  :key="item._id"
  @click="btnIndex = index"
>
  {{ item.question }} 
</button>

It means than when the page is loaded, if 4 buttons were in it, first of them should have optional-red-outlined-btn class and active class but others just have optional-red-outlined-btn class.

of course but i want when click on other button remove active of first button ,I use it for just one button have active style button:focus{ background-color: $optional-red; color: #fff; } but i want in default first button have this style

I want to set an active class just to first button in this code:

<button
  class='optional-red-outlined-btn'
  v-for="(item, index) in faq"
  :key="item._id"
  @click="btnIndex = index"
>
  {{ item.question }} 
</button>

It means than when the page is loaded, if 4 buttons were in it, first of them should have optional-red-outlined-btn class and active class but others just have optional-red-outlined-btn class.

of course but i want when click on other button remove active of first button ,I use it for just one button have active style button:focus{ background-color: $optional-red; color: #fff; } but i want in default first button have this style

• javascript
• vue.js
• vuejs2
• nuxt.js

Share Improve this question Follow edited Mar 28, 2022 at 7:12 kissu 47k1616 gold badges9090 silver badges189189 bronze badges asked Aug 11, 2021 at 12:05 faezehfaezeh 12333 silver badges1515 bronze badges 2

• Take a look here – Nikola Pavicevic Commented Aug 11, 2021 at 12:08
• vuejs/v2/guide/class-and-style.html#Object-Syntax – Robert Niestroj Commented Aug 11, 2021 at 12:09

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

You can make a dynamic class based on a condition like

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

As shown in the official documentation

I am pretty sure your btnIndex variable has 0 value by default. So you can apply conditional class

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

You can do that pletely without vuejs. Use simple CSS. Give the button a special class and then:

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

本文标签： javascriptHow can I style the first element of a vfor in vueStack Overflow