前言

對于目前形式，微信小程序是一個熱門，那么我們該如何去學習并且掌握之后去做實際項目呢？
為此我特意開設此專欄，在我學習的同時也將其分享給大家！

本篇文章我將帶大家學習一下條件渲染相關知識點，接下來我將結合例子來講解！

如果在往下閱讀的過程中，有什么錯誤的地方，期待大家的指點！

一、wx：if 渲染方式

首先我將為大家介紹 wx：if 這一渲染方式，老規(guī)矩先介紹一下基本知識

1.1 wx：if 介紹

wx：if 是使用在組件內，在組件屬性部分添加 ：wx：if=“{{ condition }}”，通過判斷為 true 之后就會展示該組件，否則就不顯示。

補充： 我們可以看到 wx：if 其實就是用于微信小程序中的條件結構，那么既然有 if ，那么咋可能少得了 else 和 elif。我們可以在 wx：if 里面添加 else 和 elif 進行判斷。

接下來我將用一個例子來詳細展示。話不多說，直接上手操作！

1.2 wx：if 實例介紹

接下來我將利用 view 組件進行演示 wx：if 語句

• 打開 list.wxml，構建三個 view 組件

  <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>
  

• 在 list.js 內創(chuàng)建數據

   data: {
  justic : 3,
  },
  

• 注釋

  1. 我們在 wxml 內創(chuàng)建了三個 view 組件，分別放入不同的圖片，我們想要實現(xiàn)利用數據 justic 來控制照片展示，比如當 justic 為1時，展示皮卡丘圖片等等
  2 .我們的 條件渲染函數需要放在 view 組件內，這樣我們才可以控制 view 組件的展示與否

• 效果展示（ justic 為 1 時）

  

• 效果展示（ justic 為 2 時）

  

• 效果展示（ justic 為 3 時）

  

二、結合 block 的整體條件渲染

如果我們想要批次控制組件的展示與否，那么這樣一個一個設置會顯得繁瑣，那么我們如何進行打包一起控制呢？這就需要我們的 block 組件發(fā)揮作用了

2.1 block 組件

我們可以將 block 組件當成一個包裹，他只是將其組件內部包括起來，他并不會在頁面上有渲染效果。

話不多說，直接上手操作！

2.1 block + wx：if 結合實例

• 打開 list.wxml 構建 block 組件

  <block wx:if="{{pikaqiu==1}}">
  <view>黃豆醬真帥！</view>
  <view>跟著黃豆醬學習小程序！</view>
  </block>
   
  <block wx:if="{{pikaqiu==6}}">
  <view>黃豆醬太棒了！</view>
  <view>我要給黃豆醬點贊！</view>
  </block>
  

• 在 list.js 內構建參數 pikaqiu

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

• 效果展示（ pikaqiu = 6 ）

  

• 效果展示（ pikaqiu = 1 ）

  

• 當然我們的 wx：if 也可以直接在 {{ }} 里面寫上 true 表示顯示控件

三、hidden 控制元素的顯示與否

hidden 可以利用 hidden=" condition "，當條件為 true 時，隱藏控件，當為 false 時顯示控件

接下來直接實例演示！

• 打開 list.wxml ，構建一個 view 組件

  <view hidden="{{ flag }}">跟著黃豆醬學習條件渲染！</view>
  

• 在 list.js 內設置 data

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

• 效果展示（ flag 為 true ）

  

• 效果展示（ flag 為 false）

  

1. hidden 和 wx：if 都可以實現(xiàn)組件的顯示與否，但是 wx：if 是通過動態(tài)創(chuàng)建和移除的方式來控制，而 hidden 是以切換樣式的方式控制
2. 當我們的頁面需要頻繁切換的時候我們推薦使用 hidden
3. 當我們的控制條件很復雜的時候，推薦使用 wx：if 和 wx:elif 和 wx：else 配合使用

總結

大家每天都要開開心心的喔，讓我們一起快樂的學習吧！

文章來源地址http://www.zghlxwxcb.cn/news/detail-791218.html

到了這里，關于【微信小程序入門到精通】— 條件渲染實現(xiàn)方式的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！