Example analysis of data binding in WeChat applet (code)

This article brings you an example analysis (code) of data binding in WeChat applet. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. The WeChat applet cannot bind the tags in the wxml page from the js page to obtain or set the value or attribute of the tag. All are implemented using data binding
2. The dynamic data in WXML comes from the data of the corresponding Page.

Data binding:
1. Simple data binding

wxml中应用双大括号将data中的数据绑定到相应的标签中：
<view> {{ message }} </view>
js中：
Page({
  data: {
    message: &#39;Hello MINA!&#39;
  }
})

2. Binding of label attributes

wxml中，其中绑定的要在双引号之中：
<view id="{{id}}"> </view>
js中:
Page({
  data: {
    id: 0
  }
})

3. Control Attribute binding

wxml中（绑定在双引号中）
<view wx:if="{{condition}}"> </view>
//作为条件句出现，可以动态决定某一个标签出现不出现
js中：
Page({
  data: {
    condition: true
  }
})
---或---
wxml中（绑定在双引号中）
<view hidden="{{condition}}"> </view>
//作为条件句出现，可以动态决定某一个标签出现不出现
js中：
Page({
  data: {
    condition: true
  }
})
//hidden与wx:if的区别：
hidden只是隐藏，但是节点是生成的
wx:if不生成节点

4. Keywords (need to be within double quotes)

true：boolean 类型的 true，代表真值。

false： boolean 类型的 false，代表假值。

<checkbox checked="{{false}}"> </checkbox>
特别注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。
//在新版的微信小程序开发工具中，这个问题好像被解决了，即checked="true"也是对的

5. Operation

1>三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view>

2>算数运算

<view> {{a + b}} + {{c}} + d </view>
Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})
view中的内容为 3 + 3 + d。

3>逻辑判断

<view wx:if="{{length > 5}}"> </view>

4>字符串运算

<view>{{"hello" + name}}</view>
Page({
  data:{
    name: &#39;MINA&#39;
  }
})

5>数据路径运算

<view>{{object.key}} {{array[0]}}</view>
Page({
  data: {
    object: {
      key: &#39;Hello &#39;
    },
    array: [&#39;MINA&#39;]
  }
})

//综上：
所有运算都是在{{}}之中进行的，这时候里面就相当于一些语言代码，而不是要呈现的内容

6. Combination (not very common, no longer If necessary, please refer to the WeChat Mini Program Development Document, Data Binding Section)

Related recommendations:

Customized analysis process of data in WeChat Mini Program

Detailed explanation of the usage of iconfont in WeChat mini program (with code)

WeChat mini program example: implementing random verification code (with code)

The above is the detailed content of Example analysis of data binding in WeChat applet (code). For more information, please follow other related articles on the PHP Chinese website!