[WeChat Mini Program Getting Started to Mastering] — Conditional Rendering Implementation

foreword

For the current form, WeChat mini-programs are a hot topic, so how do we learn and master them and then do practical projects?
For this reason, I specially set up this column to share it with you as I study!

In this article, I will take you to learn about the knowledge points related to conditional rendering, and then I will explain it with examples!

如果在往下阅读的过程中，有什么错误的地方，期待大家的指点！

---

1. wx:if rendering method

首先我将为大家介绍 wx：if 这一渲染方式，老规矩先介绍一下基本知识

1.1 Introduction to wx:if

wx:if is used in the component, add in the component properties section:wx：if=“{ { condition }}”, the component will be displayed after it is judged to be true, otherwise it will not be displayed.

Supplement: We can see that wx:if is actually a conditional structure used in WeChat applet, so since there is if, then there may be less else and elif. We can add else and elif in wx:if to judge.

接下来我将用一个例子来详细展示。话不多说，直接上手操作！

1.2 wx: if example introduction

Next I will use the view component to demonstrate the wx:if statement

• Open list.wxml and build three view components

  <view wx:if="{
         
         {justic==1}}">
  <image src="/pages/照片/皮卡丘.png" mode="widthFix" />
  </view>
  
  <view wx:elif="{
         
         {justic==2}}">
  <image src="/pages/照片/7b47e8086ac6a47343618b3c7d37f2a7.jpeg" mode="widthFix" ></image>  
  </view>
  
  <view wx:else>
  <image src="/pages/照片/Screenshot 2022-08-16 142417.png" mode="widthFix"></image>
  </view>
  

• Create data inside list.js

   data: {
        
        
  justic : 3,
  },
  

• Notes

  1. We created three view components in wxml and put different pictures respectively. We want to use data justic to control the photo display, such as when justic is 1, display Pikachu pictures, etc.
  2. Our conditional rendering The function needs to be placed in the view component, so that we can control whether the view component is displayed or not

• Effect display (when justic is 1)

  

• Effect display (when justic is 2)

  

• Effect display (when justic is 3)

  

---

2. Combined with the overall conditional rendering of the block

If we want to batch control the display of components, then such a setting will be cumbersome, so how do we package and control them together? This is where our block component comes into play

2.1 block components

We can treat the block component as a package, it just wraps its component inside, it will not render on the page.

话不多说，直接上手操作！

2.1 block + wx: if combination example

• Open list.wxml to build block component

  <block wx:if="{
         
         {pikaqiu==1}}">
  <view>黄豆酱真帅！</view>
  <view>跟着黄豆酱学习小程序！</view>
  </block>
   
  <block wx:if="{
         
         {pikaqiu==6}}">
  <view>黄豆酱太棒了！</view>
  <view>我要给黄豆酱点赞！</view>
  </block>
  

• Build parameter pikaqiu inside list.js

  data: {
        
        
  justic : 3,
  pikaqiu :6,
  },
  

• Effect display ( pikaqiu = 6 )

  

• Effect display ( pikaqiu = 1 )

  

• Of course, our wx:if can also write true directly in { { }} to indicate the display control

---

3. Whether the hidden control element is displayed or not

hidden can use hidden="condition", when the condition is true, hide the control, when it is false, display the control

接下来直接实例演示！

• Open list.wxml and build a view component

  <view hidden="{
         
         { flag }}">跟着黄豆酱学习条件渲染！</view>
  

• Set data inside list.js

     data: {
        
        
      justic : 3,
      pikaqiu :1,
      flag :true,
    },
  

• Effect display ( flag is true )

  

• Effect display ( flag is false )

  

1. Both hidden and wx:if can realize the display of components, but wx:if is controlled by dynamic creation and removal, while hidden is controlled by switching styles
2. When our page needs to be switched frequently
3. When our control conditions are very complex, it is recommended to use wx:if and wx:elif and wx:else together

---

Summarize

Everyone should be happy every day, let's study happily together!