🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
WXML 中的动态数据均来自对应 Page 的 data。 ## 一、简单绑定 数据绑定使用 Mustache 语法(双大括号)将变量包起来,可以作用于: ### 1.1 内容 ``` <view> {{ message }} </view> ``` ``` Page({ data: { message: 'Hello World!' } }) ``` ### 1.2 组件属性 ``` <view id="item-{{id}}"></view> ``` ``` Page({ data: { id: 0 } }) ``` ### 1.3 控制属性 ``` <view wx:if="{{condition}}"> </view> ``` ``` Page({ data: { condition: true } }) ``` ### 1.4 关键字 `true`:boolean 类型的 true,代表真值。 `false`: boolean 类型的 false,代表假值。 ~~~ <checkbox checked="{{false}}"> </checkbox> ~~~ > ***特别注意:不要直接写`checked="false"`,其计算结果是一个字符串,转成 boolean 类型后代表真值。*** ## 二、运算 可以在`{{}}`内进行简单的运算,支持的有如下几种方式: ### 2.1 三元运算 ~~~ <view hidden="{{flag ? true : false}}"> Hidden </view> ~~~ ### 2.2 算数运算 ~~~ <view> {{a + b}} + {{c}} + d </view> ~~~ ~~~ Page({ data: { a: 1, b: 2, c: 3 } }) ~~~ view中的内容为`3 + 3 + d`。 ### 2.3 逻辑判断 ~~~ <view wx:if="{{length > 5}}"> </view> ~~~ ### 2.4 字符串运算 ~~~ <view>{{"Hello" + name}}</view> ~~~ ~~~ Page({ data:{ name: 'World' } }) ~~~ ### 2.5 数据路径运算 ~~~ <view>{{object.key}} {{array[0]}}</view> ~~~ ~~~ Page({ data: { object: { key: 'Hello ' }, array: ['World'] } }) ~~~ ## 三、组合 也可以在 Mustache 内直接进行组合,构成新的对象或者数组。 ### 3.1 数组 ~~~ <view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view> ~~~ ~~~ Page({ data: { zero: 0 } }) ~~~ 最终组合成数组`[0, 1, 2, 3, 4]`。 ### 3.2 对象 ~~~ <template is="objectCombine" data="{{for: a, bar: b}}"></template> ~~~ ~~~ Page({ data: { a: 1, b: 2 } }) ~~~ 最终组合成的对象是`{for: 1, bar: 2}`。也可以用扩展运算符`...`来将一个对象展开。 ~~~ <template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template> ~~~ ~~~ Page({ data: { obj1: { a: 1, b: 2 }, obj2: { c: 3, d: 4 } } }) ~~~ 最终组合成的对象是`{a: 1, b: 2, c: 3, d: 4, e: 5}`。 如果对象的 key 和 value 相同,也可以间接地表达。 ~~~ <template is="objectCombine" data="{{foo, bar}}"></template> ~~~ ~~~ Page({ data: { foo: 'my-foo', bar: 'my-bar' } }) ~~~ 最终组合成的对象是`{foo: 'my-foo', bar:'my-bar'}`。 > **注意**:上述方式可以随意组合,但是如有存在变量名相同的情况,后边的会覆盖前面,如: ~~~ <template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template> ~~~ ~~~ Page({ data: { obj1: { a: 1, b: 2 }, obj2: { b: 3, c: 4 }, a: 5 } }) ~~~ 最终组合成的对象是`{a: 5, b: 3, c: 6}`。 > **注意**:花括号和引号之间如果有空格,将最终被解析成为字符串 ~~~ <view wx:for="{{[1,2,3]}} "> {{item}} </view> ~~~ 等同于 ~~~ <view wx:for="{{[1,2,3] + ' '}}"> {{item}} </view> ~~~