tencent cloud

Tencent Cloud Super App as a Service

Release Notes and Announcements
Announcement: Tencent Cloud Mini Program Platform Renamed to Tencent Cloud Super App as a Service on January 2, 2025
Console Updates
Android SDK Updates
iOS SDK Updates
Flutter SDK Updates
IDE Updates
Base Library Updates
Product Introduction
Overview
Strengths
Use Cases
Purchase Guide
Billing Overview
Pay-As-You-Go Billing
Renewal Guide
Service Suspension Instructions
Getting Started
Plan Management
Overview
Console Account Management
Storage Configuration
Acceleration Configuration
Branding Configurations
Platform Features
Console Login
Users and Permission System
Mini Program Management
Mini Game Management
Superapp Management
Commercialization
Platform Management
User Management
Team Management
Operations Management
Security Center
Code Integration Guide
Getting Demo and SDK
Android
iOS
Flutter
Superapp Server
GUID Generation Rules
Mini Program Development Guide
Mini Program Introduction and Development Environment
Mini Program Code Composition
Guide
Framework
Components
API
Server Backend
JS SDK
Base Library
IDE Operation Instructions
Mini Game Development Guide
Guide
API
Server Backend
Practice Tutorial
Mini Program Login Practical Tutorial
Mini Program Subscription Message Practical Tutorial
Payment Practical Tutorial
Ad Integration Practical Tutorial
Mini Game Subscription Message Practical Tutorial
API Documentation
History
Introduction
API Category
Making API Requests
Operation Management APIs
User Management APIs
Team Management APIs
Sensitive API-Related APIs
Role Management APIs
Platform Management APIs
Other Console APIs
Mini Program or Mini Game APIs
Management-Sensitive APIs
Global Domain Management APIs
Superapp APIs
Data Types
Agreements
Service Level Agreement
Data Processing and Security Agreement
SDK Privacy Policy Module
SDK Data Processing and Security Agreement Module

Data Binding

PDF
Focus Mode
Font Size
Last updated: 2024-11-21 18:34:18
The dynamic data in WXML comes from the data of the corresponding Page.

Simple Binding

Data binding uses the Mustache syntax (double curly brackets) to wrap the variables. It can be used for the following:

Content

<view> {{ message }} </view>
Page({
data: {
message: 'Hello MINA!'
}
})

Component Properties (must be enclosed in double quotes)

<view id="item-{{id}}"> </view>
Page({
data: {
id: 0
}
})

Control Properties (must be enclosed in double quotes)

<view wx:if="{{condition}}"> </view>
Page({
data: {
condition: true
}
})

Keywords (must be enclosed in double quotes)

True: Boolean-type true.
false: Boolean-type false.
<checkbox checked="{{false}}"> </checkbox>
Note:
Do not directly write checked="false". Its computing result is a string which represents a true value when converted to a Boolean value.

Operations

You can implement simple operations in {{}}. This syntax supports the following methods:

Ternary Operations

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

Arithmetic Operations

<view> {{a + b}} + {{c}} + d </view>
Page({
data: {
a: 1,
b: 2,
c: 3
}
})
The content in view is 3 + 3 + d.

Logical Judgments

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

String Operations

<view>{{"hello" + name}}</view>
Page({
data:{
name: 'MINA'
}
})

Data path Operations

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

Combinations

You can also directly implement combinations in Mustache syntax to build new objects and arrays.

Arrays

<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
Page({
data: {
zero: 0
}
})
The end result is the array [0, 1, 2, 3, 4].

Objects

<template is="objectCombine" data="{{for: a, bar: b}}"></template>
Page({
data: {
a: 1,
b: 2
}
})
The end result is the object {for: 1, bar: 2}.
You can also use the extended operator ... to extend the object.
<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
Page({
data: {
obj1: {
a: 1,
b: 2
},
obj2: {
c: 3,
d: 4
}
}
})
The end result is the object {a: 1, b: 2, c: 3, d: 4, e: 5}.
If the object’s key and value are identical, this can be indirectly expressed.
<template is="objectCombine" data="{{foo, bar}}"></template>
Page({
data: {
foo: 'my-foo',
bar: 'my-bar'
}
})
The end result is the object {foo: 'my-foo', bar:'my-bar'}.
Any combination of the above methods is allowed, but if there are cases where identical variable names occur, the latter will overwrite the former, such as:
<template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template>
Page({
data: {
obj1: {
a: 1,
b: 2
},
obj2: {
b: 3,
c: 4
},
a: 5
}
})
The end result is the object {a: 5, b: 3, c: 6}.
Note:
If there are spaces between curly brackets and quotes, the content is ultimately parsed into a string.
<view wx:for="{{[1,2,3]}} ">
{{item}}
</view>
equivalent to
<view wx:for="{{[1,2,3] + ' '}}">
{{item}}
</view>


Help and Support

Was this page helpful?

Help us improve! Rate your documentation experience in 5 mins.

Feedback