vue에서 v-for의 첫 번째 요소를 스타일링하려면 어떻게 해야 합니까?

vue에서 v-for의 첫 번째 요소를 스타일링하려면 어떻게 해야 합니까?

설정하려고 합니다.activeclass to first button(이 코드의 첫 번째 버튼만 클래스

<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학급.

물론 첫 번째 버튼의 활성화 제거 다른 버튼을 클릭했을 때 활성화 스타일버튼을 1개만 사용할 수 있습니다.focus { background - color : $optional - red ; color : #ff ; } 단, 기본적으로 첫 번째 버튼은 이 스타일입니다.

다음과 같은 조건에 따라 동적 클래스를 만들 수 있습니다.

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

공식 문서에 나와 있는 바와 같이

나는 거의 확신해.btnIndexvariable 값은 기본적으로0 입니다.그래서 당신은 조건부 수업을 신청할 수 있다.

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

vuejs 없이도 완벽하게 수행할 수 있습니다.단순한 CSS를 사용합니다.버튼에 특수 클래스를 지정한 후 다음을 수행합니다.

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

언급URL : https://stackoverflow.com/questions/68741697/how-can-i-style-the-first-element-of-a-v-for-in-vue