微信小程序--数据绑定

第一次开始学习微信小程序，写写博客记录一下，也是假期第一篇博客呀。
所谓数据绑定，就是通过双大括号“{{}}”将变量包起来，在WXML页面里面将对应的数据显示出来。
比如：

//index.wxml,WXML页面代码
<view>{{msg}}</view>

//index.js，JS页面代码
Page({
	data:{
		msg:'Hello world'
	}
})

效果显示

• 组件属性绑定

  是将data里的数据绑定到微信小程序的组件上
  示例：

//wxml
<view id="item-{{id}}"> </view>
//则此时这个view的id为0
//js
Page({
	data:{
		id:0
	}
})

• 控制属性绑定
  用来进行if语句条件判断，如果条件为真，则执行，否则不执行

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

• 关键字绑定
  常用于组件的一些关键字；像复选框组件一样，checked关键字如果等于true，则代表复选框选中；相反若等于false，则代表不选中

<checkbox checked="{{false}}"> </checkbox>
//注意不要写成checked = "false"，这个的结果是一个字符串，转成boolean类型后表示真.

运算

• 三元运算

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

• 数学运算

//wxml
<view>{{a+b*c}}+{{c}}</view>
//js
Page({
	data:{
		a:1,
		b:2,
		c:4
	}
})
//则view中的内容为9+4

• 逻辑判断

<view wx:if="{{len>5}}"> </view>
//表示如果len大于5，这块内容才会显示

• 字符串运算

//wxml
<view>{{"hello" + name }} </view>>
//js
Page({
	data:{
		name:'MiniProgram!'
	}
})
//则view中显示的内容为“hello MiniProgram”

• 数据路径运算

//wxml
<view>{{obj.key}} {{array[0]}}</view>
//js
Page({
	data:{
		obj:{
			key:'Hello'
		},
		array:['World','MiniProgram']
	}
})
//则view中显示Hello World