[WeChat Mini Program Getting Started to Mastering] — 条件付きレンダリングの実装

序文

現在のフォームでは、WeChat のミニ プログラムが話題になっていますが、それをどのように学習して習得し、実践的なプロジェクトを行うのでしょうか。
このため、このコラムを特別に設定して、勉強しながら共有します！

この記事では、条件付きレンダリングに関するナレッジポイントについて学び、例を挙げて説明します!

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

---

1. wx:if レンダリング方法

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

1.1 wx:if の紹介

wx:if がコンポーネントで使用されている場合は、コンポーネントのプロパティ セクションに追加します。wx：if="{ {条件}}"の場合、true と判断された後にコンポーネントが表示され、それ以外の場合は表示されません。

補足: wx:if は実際には WeChat アプレットで使われている条件付き構造なので、if があるので、else と elif は少ないかもしれません。wx:if に else と elif を追加して判断することができます。

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

1.2 wx: if 例紹介

次に、ビュー コンポーネントを使用して wx:if ステートメントを示します。

• list.wxml を開き、3 つのビュー コンポーネントをビルドします。

  <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 内にデータを作成する

   data: {
        
        
  justic : 3,
  },
  

• ノート

  1. wxmlで3つのビューコンポーネントを作成し、それぞれ異なる画像を配置しました. データ justic を使用して、写真の表示を制御します.たとえば、justicが1の場合、ピカチュウの画像を表示するなど.
  2. 条件付きレンダリング関数が必要ですビューコンポーネントに配置して、ビューコンポーネントを表示するかどうかを制御できるようにします

• 効果表示(justicが1の場合)

  

• 効果表示（ジャスティックが2の場合）

  

• 効果表示（ジャスティックが3の場合）

  

---

2. ブロック全体の条件付きレンダリングと組み合わせる

コンポーネントの表示を一括で制御したい場合、そのような設定は面倒なので、それらをまとめてパッケージ化して制御するにはどうすればよいでしょうか。これが、ブロック コンポーネントの出番です。

2.1 ブロック コンポーネント

ブロック コンポーネントをパッケージとして扱うことができます。コンポーネントをラップするだけで、ページには表示されません。

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

2.1ブロック＋wx：ifの組み合わせ例

• list.wxml を開いてブロック コンポーネントを構築する

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

• list.js内にパラメータpikaquを構築する

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

• エフェクト表示 ( ピカチュウ = 6 )

  

• エフェクト表示 ( ピカチュウ = 1 )

  

• もちろん、wx:if は { { }} に true を直接記述して、表示コントロールを示すこともできます

---

3. 非表示のコントロール要素を表示するかどうか

hidden は hidden="condition" を使用できます。条件が true の場合はコントロールを非表示にし、false の場合はコントロールを表示します

接下来直接实例演示！

• list.wxml を開き、ビュー コンポーネントをビルドします。

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

• list.js 内にデータを設定する

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

• 効果表示 (フラグは true )

  

• 効果表示 (フラグは false )

  

1. hidden と wx:if の両方でコンポーネントの表示を実現できますが、wx:if は動的な作成と削除によって制御され、hidden はスタイルの切り替えによって制御されます
2. ページを頻繁に切り替える必要がある
場合 3. 制御条件の場合wx:if と wx:elif と wx:elseを一緒に使用することをお勧めします。

---

要約する

誰もが毎日幸せであるべきです、一緒に楽しく勉強しましょう！