v-if 예제

이는 v-if 지시문 식이 false로 평가되는 경우에만 평가되므로 InStock 속성에 1과 10 사이의 숫자가 포함되어 있는지 여부를 효과적으로 확인합니다. 당연히 나는 같은 라인에 V-for와 v-if를 결합하는 것에 대해 생각했다. 각 반복을 통해 특정 기준과 일치하는지 확인합니다. 이와 같이 두 번째 단락에서는 v-else-if 지시문을 사용합니다. v-if 지시문 식이 false로 평가되면 이 명령어가 사용됩니다. v-else-if 지시문도 식을 사용하므로 이번에는 itemsInStock 데이터 속성이 0보다 큰지 확인합니다. 첫 번째 조건에 관해서는 v-if 지시문을 사용하여 itemsInStock 속성에 이와 같이 10보다 큰 숫자가 포함되어 있는지 확인할 수 있습니다. 입력에 입력된 값을 기반으로 스팬을 렌더링하는 빠른 예제입니다. 이제 문서 맨 위에 있는 원래 루프에 다시 초점을 맞추면 사용자 개체 대신 activeUsers 개체를 반복합니다. 이렇게 하면 각 루프 반복이 이미 루프에 대한 기준을 충족하도록 보장됩니다. 우리는 거기에 추가 v-if 문이 필요하지 않습니다. 다시 말하지만, 이것은 예를 들어 단순화되었습니다. 그러나 정수 키가 없고 대신 문자열 기반 개체 키가있는 경우 .filter(를 사용할 수 없지만 계산 된 속성을 사용하여 목록을 필터링한 다음 컴퓨터 속성을 반복하는 개념은 여전히 적용됩니다).

다음 비디오에는 v-ifvs v-show의 데모가 포함되어 있습니다. UI 요소 렌더링에 대한 Vue.js 다음에 제어 구조입니다. v-if는 컨트롤 분기를 지원합니다. 다른 경우.. 다른. 좋아, 그래서 위의 코드는 나를 위해 했던 것처럼 첫 번째 본능이 될 수 있습니다. 루프를 설정하는 동안 현재 사용자 이터레이션이 활성 사용자인지 여부를 결정하기 위해 v-if를 추가합니다. 스포일러 경고 : 이것은 작동하지 않습니다. 현재 사용자에 대한 액세스 권한을 얻으려면 v-forattached가 있는 요소의 자식에 v-if를 연결해야 합니다.

시도할 수 있는 이에 대한 해결 방법이 있습니다. 이 간단한 예제에서는 v-if를

요소에 연결할 수 있습니다. 그것은 작동 하지만 이것은 간단한 예제 이며 실제로 각 루프 반복 하는 동안 만드는 많은 요소를 해야 합니다., 그래서 그들 각각에 v-if를 추가 하는 것은 실용적이지 않습니다. 그러나 예를 들어 v-if 지시문에 영향을 받고 싶은 요소가 여러 개 있는 경우 어떻게 해야 합니까? 재고가 많은 항목이 있는 경우에만 렌더링하려는 두 개의 새 단락 태그가 있다고 가정해 보겠습니다. 이것은 위와 같은 예이지만 Lodash _.pickBy() 메서드를 사용하여 각 개체에 대해 자세히 알아보고 속성을 찾은 다음 사용자를 그룹의 일부로 수락하여 반복합니다.

Comments are closed.