一、数据绑定
wxml中的动态数据均来自于对应js文件中的Page的data,在js中访问Page的data用this.data, 改变data中某个属性的值用setData()方法。
Page({
data: {
id: 0,
message: "hello",
condition:true
}
})
简单绑定:
数据绑定使用Mustache语法(双大括号)将变量包起来
<view> {{message}} </view>
作用与组件属性:
<view id="item-{{id}}" </view>
作用于控制属性:
<view wx:if="{{condition}}"> </view>
运算:
三元运算: <view hidden="{{flag?true: false}}" > hidden </view>
算术运算: <view {{a + b}} + {{c}} + d </view>
逻辑运算:
<view wx:if="{{ length > 5 }}" > </view>
字符串运算:
<view> {{"message" + name }} </view>
二、wxml 组合
可以在Mustache内直接进行组合,构成新的对象或者数组;
<view wx:for="{{[zero, 1, 2, 3]}}" > {{item}} </view>
<template name="objectCombine">
<view>
<text> {{for}} </text>
<text> {{bar}} </text>
</view>
</template> <template name="objectCombine">
<view>
<text> {{a}} </text>
<text> {{b}} </text>
<text> {{c}} </text>
<text> {{d}} </text>
</view>
</template>
<text> 使用对象 </text>
<template is="objectCombine" data="{{for: a, bar: b}}"> </template> <text> 对象展开 </text>
<template is="objectCombine2" data="{{...obj1, ...obj2, e: 5}}"> </template> 条件渲染:
<view wx:if="{{length > 1}}"> </view>
<view wx:elif="{{length > 2}}" > </view>
<view wx:else> </view> <block wx:if="{{length >1 }}"">
<view> </view>
<view> </view>
</block>