Maison > Article > Applet WeChat > Rendu conditionnel complet du mini programme en dix minutes
Cet article vous apporte des connaissances pertinentes sur le WeChat Mini Program, qui présente principalement le contenu pertinent sur le rendu conditionnel. Le soi-disant rendu conditionnel consiste à déterminer s'il faut restituer le code sur la page d'affichage. , j'espère que cela aidera tout le monde.
Dans le framework, utilisez wx:if=""
pour déterminer si le bloc de code doit être rendu : 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
est vraie, le composant de vue sera rendu sur la page, sinon le composant ne sera pas affiché. En même temps, il peut également être utilisé en combinaison avec wx:elif
et wx:else
. À ce stade, plusieurs conditions peuvent être utilisées pour déterminer s'il faut restituer le. code. rrreee
Faisons une démonstration : définissons un type dans les données du fichier🎜🎜2.block est utilisé conjointement avec wx:if 🎜🎜Parce quejs
, et définissons trois types dans lewxml
file Le composant de vue détermine s'il faut restituer le composant de vue en fonction de la valeur de type.🎜🎜À ce stade, modifiez la valeur du type Vous peut modifier le contenu du rendu de la page. 🎜
wx:if
est un attribut de contrôle et doit être ajouté à un étiquette. Si vous souhaitez déterminer plusieurs balises de composants à la fois, vous pouvez utiliser une balise <block></block>
pour envelopper plusieurs composants et utiliser l'attribut de contrôle wx:if
ci-dessus. . 🎜rrreee🎜Remarque : Ce n'est pas un composant, c'est juste un conteneur d'emballage et ne fera aucun rendu sur la page. 🎜🎜Faisons une démonstration : enveloppez deux composants🎜🎜3.hiden implémente le rendu conditionnel🎜🎜Dans le framework, utilisezview
dans<block></block>
et utilisezwx:if code> pour décider si ces deux composants doivent être rendus. <br><img src="https://img.php.cn/upload/article/000/000/067/26f15617cc5eaa265907c965be777bb7-3.png" alt="Insérer la description de l'image ici"><br> <br> À ce moment sur la page Deux composants <code>view
sont rendus etblock
, en tant que conteneur d'encapsulation, n'est pas rendu. 🎜
hidden=""
pour contrôler l'affichage et le masquage des composants. Contrairement au précédent, le composant masqué sera toujours rendu et ce n'est qu'un simple contrôle à afficher et à masquer. 🎜rrreee🎜Faisons une démonstration : définissez un flag dans le fichier🎜js
et utilisezhiddenwxml
/code>Masquer le composant de vue.
Peut être trouvé dansAppData
pour contrôler s'il faut masquer le composant de vue. 🎜
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!