小程序中数据绑定跟vue中的数据绑定很相似，绑定时需遵循以下两个原则。

1、在data中定义数据

小程序页面数据存放在页面js文件中的data对象内，WXML中使用Mustache语法格式调用。

2、在WXML中使用数据

把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来即可。语法格式如下图所示：

Mustache语法的主要应用场景如下：

1、绑定内容

Page({
  data: {
    motto: 'Hello World',
  },
})

<view>{{motto}}</view>

2、绑定属性

Page({
  data: {
    imgSrc: '	https://q7.itc.cn/images01/20240319/1caf8caa49394fc298c7e6ab5cb6bebd.jpeg',
  },
})

<image src="{{imgSrc}}" mode="aspectFit"></image>

3、运算（三元运算、算术运算等）

Page({
  data: {
    randomNum:Math.random()*10//生成10以内的随机数
  },
})

<view>{{randomNum>=5?'随机数字大于或等于5':'随机数字小于5'}}</view>