WeChat applet: Use of rendering labels

In a applet, there are currently only two rendering labels: Conditional rendering and list rendering. In a applet, there are currently only two rendering labels: Conditional rendering and list rendering.
I. Conditional rendering
In the framework, we use wx: if = "{condition}" to determine whether to render the code block, because wx: if is a control attribute, you need to add it to a tag, that is, view tag. However, if we want to determine multiple component labels at a time, we can use one Tags encapsulate multiple components and use wx: if to control the attributes above. Next we will introduce the case of the last course.
. Js

Page ({data: {text: "This is the content of www.html 51.com", btnText: "This is the content of the button ",},

. Wxml

 default  {{btnText}} 
 
  {{text}}
 

12.16.you can display the contents of www.html 51.com when the ifcondition is true, as shown in:

3 ). of course, the true and false values in the above instance can also be implemented in the data binding format. when the conditional values of wx: if are switched, the framework has a partial rendering process, it will make sure that the condition block is destroyed or re-rendered when switching. The code and implementation are as follows:

Data: {text: "This is the content of www.html 51.com", btnText: "This is the content of the button", show: true ,},

 
  {{text}}
 

4). we can also perform Dynamic Conditional rendering and make conditional rendering when you click the mouse:

Data: {text: "This is the content of www.html 51.com", btnText: "This is the content of the button", show: true ,},

BtnClick: function () {console. log ("The button is clicked... ") var isShow = this. data. show; console. log ("isShow:" + isShow) this. setData ({text: "This is the new 51 applet content "})}

For compilation, you can see:

5). We also perform a "hide"-"show" loop action after clicking.

BtnClick: function () {console. log ("The button is clicked... ") var isShow = this. data. show; console. log ("isShow:" + isShow) this. setData ({text: "This is the new 51 applet content", show :! IsShow })}

The compiled result is as follows:

6) You can also use wx: elif and wx: else to add an else block, as shown below:

 default  {{btnText}} 
 
  {{text}} 1
 
 
  {{text}} 2
 

Based on the above code, when we click the mouse, it will show Loop 1 2. let's take a look at the result:

List rendering is what we often call for loop rendering. with list data, we can display a bunch of news data in a loop, and use the wx: for Control attribute on the component to bind an array, you can use the data in the array to repeatedly render the component.

 
    {{index}}: {{item.message}}
 

1). let's continue with the example. we added the following code in our. wxml file:

 
  
Www.html51.com mini-program tutorial loop playback...
 

Shows the compiled result:

2). Similarly, you can use data binding for list rendering. The code for data binding is as follows:

Data: {text: "This is the content of www.html 51.com", btnText: "This is the content of the button", show: false, news: ['AAA', 'BBB ', 'CCC '],},

 
 

  
  
51 mini-program demo
 
 

3) The question is, how can we display the content in the array? The subscript variable name of the current item of the default array is index by default, and the variable name of the current item of the array is item by default. So item can display the content in the array. let's take a look:

 
  {{item}}
 

The compiled result is as follows:

 
  {{index}} : {{item}}
 

4). how to dynamically update the values in the array list? For example, we set shift () to delete the first value of the array each time we click ();

BtnClick: function () {console. log ("The button is clicked... ") var isShow = this. data. show; var newsData = this. data. news; newsData. shift (); console. log ("isShow:" + isShow) this. setData ({text: "This is the new 51 applet content", show :! IsShow, news: newsData })}

Let's take a look at the demo:

1. when assigning values to show in data, double quotation marks are not required.

For more small programs: For more articles on the use of rendering labels, refer to PHP!