微信小程序(四)-wxml详解

数据绑定

wxml中的动态数据均来自对应js文件中page的data
在js中访问page的data用this.data 改变data中某个属性的值用setdata方法

简单绑定

数据绑定使用mustache语法(双大括号)将变量包起来.可以作用于以下区域:

1.作用于内容

{{message}}

Page({
	data:{
		message:"Hello Wolrd!"
	}
})

2.作用于组件属性

Page({
	data:{
		id:0
	}
})

3.作用于控制属性

Page({
	data:{
		condition:true
	}
})

运算

可以在{{}} 内进行简单的运算,支持的有如下几种方式:

1.三元运算

2.算数运算

{{a+b}} +{{c}} +d
Page({
	data:{
	 a:1,
	 b:2,
	 c:3
	}
})

3.逻辑判断

4.字符串运算

{{"hello"+name}}
Page({
	data:{
		name:'MINA'
	}
})

组合

可以在mustache内直接进行组合,构成新的对象或者数组

数组组合

{{item}}
Page({
	data:{}
})

最终组合数组:0,1,2,3,4

对象组合