[wechat applet] super easy to understand conditional rendering and list rendering

Hello, old audience , Niuniu is updated again , Above, we learned about the event binding in wechat applet in detail , So today we'll talk about WXML List rendering and conditional rendering in syntax , They are also very important knowledge points , Hurry to learn .
But first of all, , We want to add the knowledge points of data transmission parameters and commonly used input Event usage .

One , Event biography

First we need to know , Parameters of event handling function in wechat applet , It cannot be done directly at the same time as the binding time , That is to say, the following operations .

<view bindtap="tapName(2)"> error </view>

You can't , In this way, the compiler will only convert the whole tapName(2) Identify the name of the event handler .

If you want to pass on , You need to provide custom attributes for components , The format is like this ——data-*,* Represents the name of the custom attribute .

The specific implementation is as follows ：

<view bindtap="tapName" data-info="{
     {2}}"></view>

Then we put it in the event handler , Just go through event.target.dataset.info You can get the passed in parameters .

Remember the event object mentioned before event Medium target Attribute , It records some attribute values of the triggering event component , The principle used above is here .

Small tip：
It should be noted that , For parameters that have been confirmed as values , We use Mustache grammar , Just enclose the parameter with double brackets , And if we just surround it with double quotation marks , as follows ：

<view bindtap="tapName" data-info="2"></view>

Resolved to data-info The value of will be a string ,"2".

Two ,input Events use

input Events are commonly used in applet development , The specific expression is to bind events to text boxes , Trigger when the content changes .

The following settings ：

<input type="text" bidninput="changetext"></input>

Generally, when we use this event , You need to get input The input value of the text box , You can do it as follows ：

changetext(e){
    
	console.log(e.detail.value)
}

e.detail.value It corresponds to the latest value after the change .

3、 ... and , Conditions apply colours to a drawing

Conditional rendering is actually equivalent to WXML Medium if sentence , Use conditions to determine whether to render a component or part of it .

The grammar is wx:if="{ {condition}}", By judging the inside condition Add to render , If true, Then render components .

except if, There are also matching elif and else.

<view wx:if="{
     {type==1}}"> male </view>
<view wx:if="{
     {type==2}}"> Woman </view>
<view> An unknown </view>

When type by 1, Only the first one view Component is rendered , When type by 2, Only the second component is rendered , If they are not satisfied , Only render the third component .

In fact, conditional rendering except if also hidden It can be done .

The grammar is hidden= "{ {condition}}",hidden For component properties , When inside condition The condition value is false, Component not hidden , by true, Components are hidden .

Speaking of this, you may find , We don't know how to control the display and hiding of multiple components at one time .

There is one in the wechat applet <block>, It is not a component , It's just a container with the nature of wrapping , Even if written into wxml, It won't be rendered （ The debugger will not see its existence ）, We can use it to realize .

<block wx:if="{
     {info==1}}">
<view>a</view>
<view>b</view>
<view>c</view>
</block>

if and hidden contrast ：

In essence ,

• if Is to dynamically create and remove components
• and hidden By changing the style , Set up display by none or block Realized

In terms of use , When we need to switch frequently , It is recommended to use hidden, When the control conditions are complex , In particular, we need to use elseif When it works , It is recommended to use if.

Four , The list of rendering

List rendering is actually understood , Is in the wxml The grammatical for sentence , Realize the cycle .

The grammar is wx:for="{ {array}}", According to the specified array , Loop rendering complex components , Be careful , The array in double brackets . In the use , We usually also set a unique key value , The grammar is wx:key.

For example, our array is as follows ：

user:[
	{id:1, name:"apple"},
	{id:2, name:"add"},
	{id:3, name:"abandon"}
]

So we can set up wx:key="id", When we call the inside name, The cycle will be based on key Traverse , Invocation time key Why is it worth , Call is which one name value .

<view wx:for="{
     {user}}" wx:key="id">{
   {name}}<view>

It should be noted that , Set up key No need to use { {}}

If the array does not have this id attribute , We can directly set key by index, Such as wx:key="index", You can also iterate through the array .

All right. , The article of this applet ends here , If it helps you , You can continue to pay attention to Niuniu's subsequent articles , Your support is the biggest driving force of our creation ！

Niuniu recently found an artifact for brushing questions , Interview questions of major Internet companies , There is also a large interview question bank .
There are also many faces of big men , Roll it up quickly ！！
Click directly to access

Debt see ~~