WeChat Mini Program Data Binding (March 13, 2023)

提示:以下是本篇文章正文内容,下面案例可供参考

data binding

1. Basic principles of data binding

① 在data中定义数据    
② 在WXML中使用数据

2. Define the data of the page in data

In the .js file corresponding to the page, define the data into the data object:

data: {
    
    
    //字符串类型的数据
    info:'init data',
    //数组类型的数据
    msgList:[{
    
    msg:'Hello'},{
    
    msg:'World'}]
  }

3. Format of Mustache grammar

Bind the data in data to the page for rendering, and use Mustache syntax (double braces) to wrap variables.

<view>{
    
    {
    
    要绑定的数据名称}}</view>

For example:
insert image description here

insert image description here

4. Application Scenarios of Mustache Grammar

① 绑定内容    
② 绑定属性
③ 运算(三元运算、算数运算等)

5. Dynamic binding properties

imageSrc:'https://ts1.cn.mm.bing.net/th/id/R-C.8cecc7ac37c9edc994de1d8e63bf0fd7?rik=x2d%2bFpTxdVRtQg&riu=http%3a%2f%2fp19.qhimg.com%2fbdm%2f1366_768_85%2ft019e03096b1178357a.jpg&ehk=nflbBHnafvE13EBX2BkwvXcDQ3AHrZxI4wDlI7WArRQ%3d&risl=&pid=ImgRaw&r=0'
<image src="{
    
    {imageSrc}}"></image>

insert image description here

6. Ternary operation

randomNum1:Math.random()*10
<view>{
    
    {
    
    randomNum1 >=5 ? '数字大于或等于5' : '数字小于5'}}</view>

insert image description here
insert image description here

7. Arithmetic operations

randomNum2:Math.random().toFixed(2)
<view>{
    
    {
    
    randomNum2 * 100}}</view>

insert image description here

Summarize

Here I learned the grammar format and application scenarios of Mustache grammar, and also learned how to bind data. If you have any questions above, please correct me, thank you.

Guess you like

Origin blog.csdn.net/qq_52992084/article/details/129502843