标签：ext 三元运算 OLE 动态改变 数组 条件 数据绑定 一个 tag
WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
WXML 具有以下几种能力
一、数据绑定
WXML 中的动态数据均来自对应 Page 的 data。
数据绑定使用 Mustache 语法（{{}}）将变量包起来
二、运算
{{}}中支持三元运算、算数运算、逻辑判断、字符串运算
三、列表渲染
1.wx:for
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
2.block wx:for
类似 block wx:if，也可以将 wx:for 用在<block/>标签上，以渲染一个包含多节点的结构块。例如：
<block wx:for="{{[1, 2, 3]}}"> <view> {{index}}: </view> <view> {{item}} </view> </block>
3.wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。
四、条件渲染
wx:if
在框架中，使用 wx:if="" 来判断是否需要渲染该代码块：
<view wx:if="{{length > 5}}"> 1 </view> <view wx:elif="{{length > 2}}"> 2 </view> <view wx:else> 3 </view>
block wx:if
因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。
<block wx:if="{{true}}"> <view> view1 </view> <view> view2 </view> </block>
.wxml文件
1 <!-- 1 字符串 --> 2 <text>字符串:{{msg}}</text> 3 <!-- 2 数字类型 --> 4 <text>数字类型:{{num}}</text> 5 <!-- 3 布尔类型 --> 6 <text>布尔类型:{{booleanType}}</text> 7 <!-- 4 对象类型,会输出[object Object],对象的属性只能单个输出 --> 8 <text>对象类型:{{person}}</text> 9 <!-- 单个输出对象中的属性 --> 10 <text>{{person.age}},</text> 11 <text>{{person.height}},</text> 12 <text>{{person.tag}},</text> 13 <!-- 5 在标签的属性中使用--数据得用双引号括起来作为自定义属性使用 --> 14 <text data-num="{{num}}">自定义属性</text> 15 <!-- 6 使用Boolean类型充当属性时，checked --> 16 <view> 17 <checkbox checked="{{isChecked}}"></checkbox> 18 </view> 19 <!-- 7 运算 → 表达式 --> 20 <view>{{1+1}}</view> 21 <view>{{‘1‘ + ‘1‘}}</view> 22 <view>{{10%2 === 0 ? ‘偶数‘ : ‘奇数‘}}</view> 23 <!-- 8 列表循环 --> 24 <view wx:for="{{list}}" wx:key="id"> 25 数组循环 索引：{{index}} 26 -- 27 值：{{item.name}} 28 </view> 29 <!-- 9 对象循环 --> 30 <view wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="*this"> 31 对象循环 属性：{{key}} 32 --- 33 值：{{kvalueey}} 34 </view> 35 <!-- 10 block 占位符标签 --> 36 <view> 37 <block>111</block> 38 <block>222</block> 39 </view> 40 <!-- 11 条件渲染 wx:if="{{true/false}}" --> 41 <view> 42 <view>条件渲染</view> 43 <view wx:if="{{true}}">显示</view> 44 <view wx:else>隐藏</view> 45 <view hidden>利用hidden属性隐藏元素</view> 46 </view>
标签：ext 三元运算 OLE 动态改变 数组 条件 数据绑定 一个 tag
原文地址：https://www.cnblogs.com/xufcs/p/13195712.html
