인덱스를 사용하여 Vuejs의 첫 번째 항목에 클래스 추가

이번에는 Vuejs의 첫 번째 항목에 class를 추가하기 위해 index를 사용할 때의 class에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

(1) v-for에서 index를 사용하여 첫 번째 항목에 class

을 추가합니다. 내 코드 조각에 파생된 CODE에서 코드 조각 보기

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

인덱스는 v-for에서 나오며, i는 순회된 array의 요소를 나타내고, 인덱스는 index를 나타냅니다.

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

를 사용하세요. 첫 번째 항목은 원래 false(0)이고, 두 번째 항목과 그 다음 항목은 true(>0)입니다. 해당 값은 논리 NOT 연산자를 통해 반전됩니다.

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

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

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

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

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

vue

axios가 게시물 요청을 보냅니다. springMVC는 매개변수를 처리할 수 없습니다.

위 내용은 인덱스를 사용하여 Vuejs의 첫 번째 항목에 클래스 추가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!