微信小程序中WXML模版语法-数据绑定方法介绍

1.数据绑定的基本原则

1>在data中定义数据

2>在WXML中使用数据

2.在data中定义页面的数据

在页面对应的.js文件中，把数据定义到data对象中即可：

page({
    
    
	data:{
    
    
		info:'init data'
	}
})

3.Mustache语法的格式

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

<view>{
   
   {info}}</view>//双括号中放入你想导入的数据

4.Mustache语法的应用场景

Mustache语法的主要应用场景为：

1>绑定内容

2>绑定属性

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

5.动态绑定属性

页面的数据如下：

page({
    
    
	data:{
    
    
		imgSrc:'www.demo.com'
	}
})

页面的结构如下：

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

6.三元运算

页面的数据如下：

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

页面的结构如下：

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

7.算术运算

让页面的数据如下：

page({
    
    
	data:{
    
    
		randomNum:Math.random().toFixed(2) //生成一个带两位小数的随机数，例如 0.34
	}
})

页面的结构如下：

<view>生成100以内的随机数：{
   
   { randomNum * 100}}</view>