WeChat Mini Program Tutorial Conditional Rendering

Conditional rendering

The so-called conditional rendering refers to the logical value of the data binding expression to determine whether to render the current component. In the following piece of code, there is a piece of code that uses the hidden attribute:

<view class=&#39;content&#39; hidden=&#39;{{flag ? true: false}}&#39;>
    <text>{{hiddencontent}}</text>
 </view>

In the above barcode, when the value of the flag variable is true, the view component and the included components will not be rendered. When the flag variable When the value is false, the view component output is rendered to the page.

wx:if conditional rendering

In the WeChat applet wxml file, another way to perform similar conditional rendering is to use the wx:if attribute to control the current component. The code is as follows:

<view wx:if= &#39;{{condition}}&#39;>内容</view>

In the above code, when the value of the condition variable is true, the view component will render the output. When the condition variable is false, the view component will not render.

In our opinion, the wx:if attribute is similar to the hidden component. The difference is that the logical variables that control whether to render are opposite. However, wx:if can be used for more convenient control. You can use wx:if ,wx:else to add multiple branch code blocks. If the value of the control expression is true, one branch will be rendered, and if it is false, another branch will be rendered. Please see the code:

<view wx:if= &#39;{{length > 3}}&#39;>内容1</view>
<view wx:elif= &#39;{{length < 5}}&#39;>内容2</view>
<view wx:else&#39;>内容3</view>

In the above code, when length If the value is greater than 3, content 1 is rendered. When the value of length is greater than 3 and less than 5, the interface renders and outputs content 2. If none of the above conditions are met, content 3 is rendered.

Smartness depends on hard work, and knowledge depends on daily accumulation

The above is the detailed content of WeChat Mini Program Tutorial Conditional Rendering. For more information, please follow other related articles on the PHP Chinese website!