Vuejs를 통해 v-for의 첫 번째 항목에 클래스를 추가하기 위해 인덱스를 사용하는 방법과 구체적인 단계는 무엇입니까?

아래에서는 v-for에서 Vuejs의 첫 번째 항목에 클래스를 추가하기 위해 index를 사용하는 방법에 대한 기사를 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

(1) v-for에서 index를 사용하여 첫 번째 항목에 클래스를 추가합니다.

내 코드 조각에 파생된 CODE에서 코드 조각 보기

<a class="list-group-item" :class="{&#39;active&#39;:!index}" v-for="(i,index) in announcement">

index는 v-for에서 가져옵니다. i는 순회된 배열의 요소를 나타내고 index는 인덱스를 나타냅니다.

인덱스는 0부터 시작하므로 첫 번째 항목에 활성 클래스가 있음을 지정하려면 v-bind:class="{'active':!index}"

첫 번째 항목은 원래 false였습니다(0 ) , 두 번째 항목 이후는 true(>0)이며, 논리 NOT 연산자를 통해 그 값이 반전됩니다.

따라서 첫 번째 항목에는 활성 클래스가 있지만 다음 항목에는 활성 클래스가 없습니다.

첫 번째 항목 외에 특정 클래스가 있는 경우 논리 NOT 연산자를 추가하지 않고도 달성할 수 있습니다.

마찬가지로 index==2와 같은 표현식을 사용하여 세 번째 항목이 이 클래스를 얻도록 할 수 있습니다.

참고, 제 버전은 Vuejs2.0이라 $index로 대체가 안되는 것 같습니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

Angular Component의 소스 코드 예제 분석

JS

에서 원래 값과 참조 값의 저장 방법에 대한 자세한 예 세 자리 숫자로 Vue 사용자 정의 필터 형식화 구현 쉼표 하나 더하기 코드

위 내용은 Vuejs를 통해 v-for의 첫 번째 항목에 클래스를 추가하기 위해 인덱스를 사용하는 방법과 구체적인 단계는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!