WeChat Mini Program: Data Binding Explanation

What I want to introduce to you today is the data binding of the mini program. Today’s content follows the WeChat mini program: the basic use of components. Students who are unclear can review it by themselves.
We talked about the text component in the last class. The example in the previous class is as follows:

Case 1: If we want to dynamically display the content in the text, You need to use data binding. Data binding uses Mustache syntax (double curly brackets) to wrap variables and identifies them with {{TEXT}}. The following use case:

<button type="default"  hover-class="other-button-hover"> default </button>
<button type="primary" > primary </button>

<text>{{text}}</text>

We will not be able to see the text content when compiling. At this time, we need to define the value of text in the data in newvip.js

  data:{
    text:"这是www.html51.com的内容"
  },

The results displayed after compilation are as follows ：

Case 2: If we want to display the content on the button through data binding, how should we implement it. (The text of the button in the above use case is primary)
Same method, on the js page:

<blockquote>  data:{

Use data binding on the wxml page as follows:

<button type="default"  hover-class="other-button-hover"> default </button>
<button type="primary" > {{btnText}} </button>

<text>{{text}}</text>

The results displayed after compilation As shown in the figure below:

#3. The method of using data binding is as mentioned above. What if the content in the data binding is dynamically changed?
The method is also very simple. In order to be able to see the dynamic changes in the data during the demonstration, we first add a click event to the button.

<div>  btnClick: function() {</div><div>      console.log("按钮被点击了...")</div><div>  }</div>

<button type="primary" bindtap="btnClick" > {{btnText}} </button>

When we compile, we will print out a log: the button was clicked..., let's take a look at the demonstration effect:

If we want to click , how do we modify the text content? Very simple

  btnClick: function() {
      console.log("按钮被点击了了...")

      this.setData({text:"这是新的51小程序内容"})
  }

The demonstration effect is as follows:

Note: Problems that may be encountered during the above operation
1. No log is specified after clicking the button When printed, there is no error message. The problem is almost invisible to the naked eye. In fact, it is an extra space between bindtap="btnClick" and > in the bindtap click event!

<button type="primary" bindtap="btnClick" > {{btnText}} </button>

2. The dynamic data in WXML comes from the data of the corresponding Page.

For more WeChat applet: data binding explanation and related articles, please pay attention to the PHP Chinese website!