10분 안에 미니 프로그램 조건부 렌더링 완료

이 글에서는 조건부 렌더링 관련 내용을 주로 소개하는 WeChat 미니 프로그램에 대한 관련 지식을 제공합니다. 소위 조건부 렌더링은 디스플레이 페이지에 코드를 렌더링할지 여부를 결정하는 것입니다. . 모두에게 도움이 되길 바랍니다.

1.wx:if는 조건부 렌더링을 구현합니다

프레임워크에서 wx:if=""를 사용하여 코드 블록을 렌더링해야 하는지 여부를 결정합니다. wx:if="" 来判断是否需要渲染该代码块：

<view>True<view></view></view>

如果condition的值为true，就会在页面上渲染出view组件，否则将不会显示该组件。同时还可以结合wx:elif和wx:else来使用，此时可以进行多条件的判断是否渲染该代码。

<view>组件1</view><view>组件2</view><view>组件3</view>

下面做一个演示：在js文件的data中定义一个type，同时在wxml文件中定义三个view组件，根据type的值来决定是否渲染view组件。

此时，改变type的值就可以改变页面渲染的内容。

2.block结合wx:if使用

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block></block> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

<block>
  <view> view1 </view>
  <view> view2 </view></block>

注意：不是一个组件，只是一个包裹性的容器，不会在页面上做任何渲染。

下面做一个演示：在<block></block>中包裹两个view组件，使用wx:if来决定是否需要渲染这两个组件。


此时在页面上渲染了两个view组件，block作为包裹性的容器并没有被渲染。

3.hiden实现条件渲染

在框架中，使用 hidden="" 来控制组件的显示与隐藏。与前面不同的是，hidden组件始终会被渲染，只是简单的控制显示与隐藏。

<view>当条件为true时则会隐藏该元素</view>

下面做一个演示：在js文件中定义一个flag，在wxml文件中使用hidden隐藏view组件。


可以在AppData中改变flag的值从而控制是否隐藏该view组件。

4. wx:if vs hidden

因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:ifrrreee

If condition 값이 true이면 보기 구성 요소가 페이지에 렌더링되고, 그렇지 않으면 구성 요소가 표시되지 않습니다. 동시에 wx:elif 및 wx:else와 함께 사용할 수도 있습니다. 이때 여러 조건을 사용하여 렌더링 여부를 결정할 수 있습니다. 암호.

rrreee

시연해 보겠습니다: js 파일의 데이터에 유형을 정의하고 wxml에 세 가지 유형을 정의합니다. file 뷰 컴포넌트는 type 값에 따라 뷰 컴포넌트를 렌더링할지 여부를 결정합니다.
🎜🎜이때 type 값을 변경해주세요. 페이지 렌더링의 내용을 변경할 수 있습니다. 🎜

🎜🎜2.block은 wx:if와 함께 사용됩니다. 🎜🎜wx:if는 제어 속성이고 a에 추가되어야 하기 때문입니다. 꼬리표. 여러 구성 요소 태그를 한 번에 결정하려면 <block></block> 태그를 사용하여 여러 구성 요소를 래핑하고 wx:if 제어 속성을 사용하면 됩니다. 맨 위 . 🎜rrreee🎜참고: 이는 구성 요소가 아니며 단지 포장 컨테이너일 뿐이며 페이지에 렌더링을 수행하지 않습니다. 🎜

🎜시연해 보겠습니다: <block></block>에 두 개의 view 구성 요소를 래핑하고 wx:if 를 사용하세요. code>를 사용하여 이 두 구성 요소를 렌더링해야 하는지 여부를 결정합니다.


현재 페이지에서 두 개의 view 구성 요소가 렌더링되고, 래핑 컨테이너인 block은 렌더링되지 않습니다. 🎜

🎜🎜3.hiden은 조건부 렌더링을 구현합니다🎜🎜프레임워크에서 hidden=""를 사용하여 구성 요소의 표시 및 숨기기를 제어합니다. 이전과 달리 숨겨진 구성 요소는 항상 렌더링되며 표시하고 숨기는 간단한 컨트롤일 뿐입니다. 🎜rrreee

🎜시연해 보겠습니다: js 파일에 플래그를 정의하고 wxml 파일에 hidden보기 구성 요소를 숨깁니다. <br><img src="https://img.php.cn/upload/article/000/000/067/cde2809dff1028af9212effd8d9ca7fc-5.png" alt="여기에 이미지 설명 삽입"><br> <br> <code>AppData에서 플래그 값을 변경하세요. 🎜

🎜🎜4.wx:if vs Hidden🎜🎜 wx:if의 템플릿에도 데이터 바인딩이 포함될 수 있으므로 wx:if의 조건부 값이 전환되면 프레임워크는 전환 시 조건부 블록이 삭제되거나 다시 렌더링되도록 보장하기 때문에 부분 렌더링 프로세스를 갖습니다. 🎜🎜동시에 wx:if도 게으르다. 초기 렌더링 조건이 false이면 프레임워크는 아무 작업도 수행하지 않고 조건이 처음으로 true가 될 때만 부분 렌더링을 시작합니다. 🎜🎜 이에 비해 hidden은 훨씬 간단하며 구성 요소는 항상 렌더링되며 단순히 표시 및 숨기기만 제어합니다. 🎜🎜일반적으로 wx:if는 전환 비용이 더 높고 hidden은 초기 렌더링 비용이 더 높습니다. 따라서 빈번한 전환이 필요한 경우에는 hidden을 사용하는 것이 좋으며, 런타임 시 조건이 변경될 가능성이 없다면 wx:if를 사용하는 것이 좋습니다. 🎜🎜【관련 학습 추천: 🎜미니 프로그램 학습 튜토리얼🎜】🎜

위 내용은 10분 안에 미니 프로그램 조건부 렌더링 완료의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!