Vue에서 숨겨진 데이터를 표시하는 방법

Vue에서는 v-if, v-show, 계산된 속성 또는 메서드를 통해 데이터를 숨기거나 표시할 수 있습니다. 아래에서는 이러한 방법을 자세히 살펴보겠습니다.

1. v-if/v-else는 표시를 제어합니다

이 예에서는 부울 유형 데이터 isShow를 사용하여 데이터를 표시할지 숨길지 제어합니다. isShow 값이 true이면 표시할 데이터가 표시되고, 그렇지 않으면 숨겨집니다.

2. v-show는 디스플레이를 제어합니다

v-if/v-else와 달리 v-show는 CSS 디스플레이 속성을 제어하여 데이터를 표시하거나 숨깁니다. isShow 값이 true이면 표시할 데이터가 표시되고 표시 속성은 기본적으로 차단과 같은 요소에 설정된 값입니다. 그렇지 않으면 숨겨지며 표시 속성은 없음입니다.

v-if/v-else와 v-show는 사용 시나리오가 다릅니다. v-if/v-else는 조건이 충족될 때만 해당 콘텐츠를 렌더링하므로 자주 전환해야 하는 경우에 사용하기에 적합합니다. 그런 다음 조건이 충족되지 않으면 파괴하고 다시 렌더링합니다. v-show는 단순히 CSS 표시 속성을 제어하기 때문에 초기 렌더링에서 조건에 따라 데이터 표시 또는 숨기기를 제어해야 할 때 사용하기에 적합합니다.

3. 계산된 계산 속성

계산 속성은 템플릿의 일부 값을 동적으로 계산하고 계산 결과를 렌더링을 위해 템플릿에 반환할 수 있습니다. 위의 예에서는 계산된 계산 속성의 메시지 메서드를 사용하여 isShow 값의 변경 사항에 따라 표시할 데이터를 동적으로 변경합니다.

4. 메서드 method

methods 메서드는 템플릿의 메서드를 동적으로 호출하고 렌더링을 위해 메서드의 반환 값을 템플릿에 반환할 수 있습니다. 위의 예에서는 isShow 값의 변화에 따라 표시할 데이터를 동적으로 변경하기 위해 메소드 메소드의 getMessage 메소드를 사용했습니다.

어떤 방법을 사용하든 특정 시나리오에 따라 데이터를 숨기거나 표시하는 적절한 방법을 선택하는 것이 핵심입니다.

위 내용은 Vue에서 숨겨진 데이터를 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!