이 글에서는 조건부 렌더링 관련 내용을 주로 소개하는 WeChat 미니 프로그램에 대한 관련 지식을 제공합니다. 소위 조건부 렌더링은 디스플레이 페이지에 코드를 렌더링할지 여부를 결정하는 것입니다. . 모두에게 도움이 되길 바랍니다.
프레임워크에서 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的值就可以改变页面渲染的内容。
因为 wx:if
是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block></block>
标签将多个组件包装起来,并在上边使用 wx:if
控制属性。
<block> <view> view1 </view> <view> view2 </view></block>
注意:不是一个组件,只是一个包裹性的容器,不会在页面上做任何渲染。
下面做一个演示:在
<block></block>
中包裹两个view
组件,使用wx:if
来决定是否需要渲染这两个组件。
此时在页面上渲染了两个view
组件,block
作为包裹性的容器并没有被渲染。
在框架中,使用 hidden=""
来控制组件的显示与隐藏。与前面不同的是,hidden组件始终会被渲染,只是简单的控制显示与隐藏。
<view>当条件为true时则会隐藏该元素</view>
下面做一个演示:在
js
文件中定义一个flag,在wxml
文件中使用hidden
隐藏view组件。
可以在AppData
中改变flag的值从而控制是否隐藏该view组件。
因为 wx:if
之中的模板也可能包含数据绑定,所以当 wx:if
的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。
同时 wx:if
也是惰性的,如果在初始渲染条件为 false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。
相比之下,hidden
就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。
一般来说,wx:if
有更高的切换消耗而 hidden
有更高的初始渲染消耗。因此,如果需要频繁切换的情景下,用 hidden
更好,如果在运行时条件不大可能改变则 wx:if
rrreee
condition
값이 true이면 보기 구성 요소가 페이지에 렌더링되고, 그렇지 않으면 구성 요소가 표시되지 않습니다. 동시에 wx:elif
및 wx:else
와 함께 사용할 수도 있습니다. 이때 여러 조건을 사용하여 렌더링 여부를 결정할 수 있습니다. 암호. rrreee
시연해 보겠습니다:🎜🎜2.block은 wx:if와 함께 사용됩니다. 🎜🎜js
파일의 데이터에 유형을 정의하고wxml
에 세 가지 유형을 정의합니다. file 뷰 컴포넌트는 type 값에 따라 뷰 컴포넌트를 렌더링할지 여부를 결정합니다.
🎜🎜이때 type 값을 변경해주세요. 페이지 렌더링의 내용을 변경할 수 있습니다. 🎜
wx:if
는 제어 속성이고 a에 추가되어야 하기 때문입니다. 꼬리표. 여러 구성 요소 태그를 한 번에 결정하려면 <block></block>
태그를 사용하여 여러 구성 요소를 래핑하고 wx:if
제어 속성을 사용하면 됩니다. 맨 위 . 🎜rrreee🎜참고: 이는 구성 요소가 아니며 단지 포장 컨테이너일 뿐이며 페이지에 렌더링을 수행하지 않습니다. 🎜🎜시연해 보겠습니다:🎜🎜3.hiden은 조건부 렌더링을 구현합니다🎜🎜프레임워크에서<block></block>
에 두 개의view
구성 요소를 래핑하고wx:if
를 사용하세요. code>를 사용하여 이 두 구성 요소를 렌더링해야 하는지 여부를 결정합니다.
현재 페이지에서 두 개의view
구성 요소가 렌더링되고, 래핑 컨테이너인block
은 렌더링되지 않습니다. 🎜
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
에서 플래그 값을 변경하세요. 🎜
위 내용은 10분 안에 미니 프로그램 조건부 렌더링 완료의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!