WeChat Mini 프로그램 튜토리얼 조건부 렌더링

wx:if

MINA에서는 wx:if="{{condition}}"을 사용하여 코드 블록을 렌더링해야 하는지 여부를 결정합니다.

51c1d1684c4711a1785a53eec9031f00 True de5f4c1163741e920c998275338d29b2

wx:elif 및 wx:else를 사용하여 else 블록을 추가할 수도 있습니다.

<view wx:if="{{length > 5}}"> 1 </view>  
<view wx:elif="{{length > 2}}"> 2 </view>  
<view wx:else> 3 </view>

block wx: if

wx:if는 제어 속성이므로 레이블에 추가해야 합니다. 그러나 여러 구성요소 태그를 한 번에 판단하려면 2b5957c2850173214f4ea7f1261e9a0f 태그를 사용하여 여러 구성요소를 래핑하고 wx:if 제어 속성을 사용할 수 있습니다.

<block wx:if="{{true}}">  
 <view> view1 </view>  
 <view> view2 </view>  
</block>

참고: 2b5957c2850173214f4ea7f1261e9a0f는 구성 요소가 아니며 페이지에서 렌더링을 수행하지 않고 제어 속성만 허용하는 래핑 요소일 뿐입니다.

wx:if vs Hidden

wx:if의 템플릿에는 데이터 바인딩도 포함될 수 있으므로 MINA는 wx:if의 조건 값이 전환될 때 부분 렌더링 프로세스를 갖습니다. 전환 시 조건부 블록이 파괴되거나 다시 렌더링되는지 확인합니다.

동시에 wx:if도 게으르다. 초기 렌더링 조건이 false인 경우 MINA는 아무것도 하지 않고 조건이 처음으로 true가 될 때만 부분 렌더링을 시작합니다.

이에 비해 숨김은 훨씬 간단하며 구성 요소는 항상 렌더링되며 표시하고 숨기는 간단한 컨트롤입니다.

일반적으로 wx:if는 전환 비용이 더 높고, Hidden은 초기 렌더링 비용이 더 높습니다. 따라서 빈번한 전환이 필요한 경우에는 Hidden을 사용하는 것이 좋으며, 런타임 중에 조건이 변경될 가능성이 없다면 wx:if가 더 좋습니다.

위는 위챗 애플릿 튜토리얼의 조건부 렌더링 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!