UI
(此图片来源于网络,如有侵权,请联系删除! )
.wxml 中的动态数据都来自 Page 中的 data 。数据绑定使用数据绑定使用双大括号将变量包起来,可以作用于内容、组件属
性(需要在双引号之内)、控制属性(需要在双引号之内)、关键字(需要在双引号之内)
Page({
data: {
message: "Hello",
id:0,
status: true
}
})
<view> {{message}} view>
<view id="item-{{id}}"> view>
<view wx:if="{{status}}"> view>
<view hidden="{{status}}"> checkbox>
还可以进行简单的运算在大括号里
<view hidden="{{status ? true : false}}"> Hidden view>
<view> {{a + b}} + c view>
<view wx:if="{{num > 6}}"> view>
<view>{{"hello" + word}}view>
2.2 条件渲染条件渲染
用 wx:if=”” 来判断是否渲染代码块
<view wx:if="{{status}}"> isShow view>
还可以添加 else 块
<view wx:if="{{num > 5}}"> A view>
<view wx:elif="{{num > 2}}"> B view>
<view wx:else> C view>
2.3 列表渲染列表渲染
在组件上使用 wx:for 属性绑定一个数组,就可以渲染组件了
默认情况下数组的当前下标变量名为 index ,当前项的变量名为 item
<view wx:for="{{array}}">
{{index}}: {{item.message}}
view>
Page({
data: {
array: ["AA","BB","CC"]
}
})
使用 wx:for-item 可以指定数组当前元素的变量名,使用 wx:for-index 可以指定数组当前下标的变量名