数据绑定
WXML中的数据都来自对应的js文件中的Page中的data属性
Page({
data: {
message:"hello wx"
}
})
使用Mustache 语法进行数据绑定
<view>{
{message}}</view>
<view>123</view>
如果需要在属性中使用时也需要使用Mustache 语法，如下：
<view id="item-{
{id}}"> </view>
<view wx:if="{
{condition}}"> </view>
<checkbox checked="{
{false}}"> </checkbox>
如果需要数据进行运算时
三目运算
<view hidden="{
{flag ? true : false}}"> Hidden </view>
算数运算
<view> {
{a + b}} + {
{c}} </view>
逻辑运算
<view wx:if="{
{length > 5}}"> </view>
字符串运算
<view>{
{"hello" + name}}</view>
列表渲染
使用wx-for实现
数组
books:[
{
id:1,
name:"weixin"
},
{
id:2,
name:"qq"
},
{
id:3,
name:"zhifubao"
}
]
实现方式：默认wx:for-item=“item” ，wx:for-index=“index”
<view wx:for="{
{books}}">{
{index}}:{
{item.name}}</view>
可以设置名字，当有多层列表渲染时，设置名字是必须的
<view
wx:for="{
{books}}"
wx:for-item="itemset"
wx:for-index="indexsetting">
{
{indexsetting}}:{
{itemset.name}}</view>
wx：key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。
wx:key 的值以两种形式提供
1，字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2，保留关键字， *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。
如下使用字符串
<view
wx:for="{
{books}}"
wx:for-item="itemset"
wx:for-index="indexsetting"
wx:key="id">
{
{indexsetting}}:{
{itemset.name}}
</view>
如下使用保留关键字
<view
wx:for="{
{books}}"
wx:for-item="itemset"
wx:for-index="indexsetting"
wx:key="*this">
{
{indexsetting}}:{
{itemset.name}}
</view>
条件渲染
wx-if，wx-else
Page({
data: {
bool:true
}
})
<view wx:if="{
{bool}}">if</view>
<view wx:else>else</view>
wx-if，wx-elif，wx-else
Page({
data: {
num:11
}
})
<view wx:if="{
{num>20}}">20</view>
<view wx:elif="{
{num>15}}">15</view>
<view wx:elif="{
{num>10}}">10</view>
<view wx:else>else</view>
hidden属性
<view hidden="{
{true}}">hidden true</view>
<view hidden="{
{false}}">hidden false</view>
if-else与hidden的区别
hidden表示display：none而if-else并没有在wxml文档中
所以当不是频繁切换显示时优先使用wx-if，直接把标签从页面结构中移除
当频繁切换时，优先使用给hidden，通过使用display：none来判断显示与否。
所以hidden不要和样式一起使用，样式会将hidden中的display：none覆盖