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

php中世界最好的语言
풀어 주다: 2018-03-27 16:35:18
원래의
2237명이 탐색했습니다.

이번에는 Vuejs의 첫 번째 항목에 class를 추가하기 위해 index를 사용하는 방법을 보여드리겠습니다. Vuejs에서 index를 사용하여 첫 번째 항목에 클래스를 추가할 때 사용하는 주의 사항은 무엇입니까? 한 번 보세요.

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

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

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

index는 v-for에서 가져옵니다. 즉, 요소 순회된 array 중 index는 index를 나타냅니다.

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

첫 번째 항목은 원래 false였습니다(0 ) , 두 번째 항 뒤에는 true(>0)가 오고 그 값은 논리 부정 연산자 를 통해 반전됩니다.

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

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

마찬가지로 index==2와 같은

표현식을 사용하여 세 번째 항목이 이 클래스를 얻도록 할 수 있습니다.

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

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

추천 자료:

백포스 새로 고침을 구현하는 웹 측 애플리케이션

JS 이미지 처리 및 합성에 대한 자세한 설명

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!