Conditional rendering on The View layer of the WeChat mini-app tutorial series (10), mini-app View

Conditional rendering of the view layer of the mini-program tutorial series (10), mini-program View

This tutorial will share with you how to use wx: if to perform conditional rendering on The View layer for your reference. The specific content is as follows:

Conditional rendering of the view layer using wx: if

Example:

Wxml: view

<! -- Index. wxml --> <button bindtap = "EventHandle"> button </button> <! -- Wx: if --> <view wx: if = "{boolean = true }}"> <view class =" bg_black "> </view> <view wx: elif = "{boolean = false }}"> <view class =" bg_red "> </view>

Wxss:

/**index.wxss**/.bg_black { height: 200rpx; background: lightskyblue;}.bg_red { height: 200rpx; background: lightpink;}

Js:

// index.jsPage({ data: {  boolean:false }, EventHandle: function(){  var bol = this.data.boolean;  this.setData({   boolean: !bol  }) }})

Run:

Continued:

Change the Green view to block.

Wxml: block

<! -- Index. wxml --> <button bindtap = "EventHandle"> button </button> <! -- Wx: if --> <block wx: if = "{boolean = true }}"> <view class =" bg_black "> </view> </block> <block wx: elif = "{boolean = false }}"> <view class =" bg_red "> </view> </block>

Run:

Continued:

Add a wx: for list rendering.

Wxml:

<! -- Index. wxml --> <button bindtap = "EventHandle"> button </button> <! -- Wx: if --> <block wx: if = "{boolean = true}" wx: for = "{arr }}"> <view class =" bg_black "> content: {item }}</view> </block> <block wx: elif = "{boolean = false }}"> <view class =" bg_red "> NO content </view> </block>

Index. js:

// index.jsPage({ data: {  boolean:false,  arr: [1,2,3] }, EventHandle: function(){  var bol = this.data.boolean;  this.setData({   boolean: !bol  }) }})

Run:

Editing error.

The reason is that wx: if cannot be shared with wx:!

Continued:

Wx: if and wx: for must be used separately

Wxml:

<! -- Index. wxml --> <button bindtap = "EventHandle"> button </button> <! -- Wx: if --> <block wx: if = "{boolean = true}"> <block wx: for = "{arr }}"> <view class =" bg_black "> content: {item }}</view> </block> <block wx: elif = "{boolean = false }}"> <view class =" bg_red "> NO content </view> </block>

Wxss:

/**index.wxss**/.bg_black { height: 200rpx; background: lightskyblue;}.bg_red { height: 200rpx; background: lightpink;}

Index. js:

// index.jsPage({ data: {  boolean:false,  arr: [1,2,3] }, EventHandle: function(){  var bol = this.data.boolean;  this.setData({   boolean: !bol  }) }})

Run:

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.