从零开始学微信小程序之WXML（2.1）数据绑定

WXML是微信小程序框架设计的一套标签语言,和html5中中的内容是相似的，其语法也是相似的。

数据绑定

WXML 中的动态数据均来自对应 Page 的 data。例如，在WXML中，要引用js中的变量，要用双花括号括起来，其中数据绑定的{{}}中，也可以是表达式，也支持三目运算、逻辑运算、字符串运算、算数运算等。

<view> {{ message }} </view>

js中的代码：

Page({
  data: {
    message: 'Hello World!'
  }
})

这样就会将“Hello World”显示在预览页面中

控制属性

其中，wx:for="{{放待循环的数组}}"

<view wx:if="{{condition}}"> </view>

js中的代码：

Page({
  data: {
    condition: true
  }
})

关键字

true：boolean 类型的 true，代表真值。

false： boolean 类型的 false，代表假值。

<checkbox checked="{{false}}"> </checkbox>

数组

js中的代码：

Page({
  data: {
    zero: 0
  }
})

WXML中的代码：

<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>

表示将1,2,3,4放入名字为zero的数组中，并用{{item}}将数组中的值显示在页面中，最终显示[0,1,2,3,4]。

对象

js中的代码：

Page({
  data: {
    a: 1,
    b: 2
  }
})

WXML中的代码：

<template is="objectCombine" data="{{for: a, bar: b}}"></template>

其中for的值对应a，bar的值对应b，
最终组合成的对象是 {for: 1, bar: 2}

另，如果对象的 key 和 value 相同，也可以间接地表达。

WXML中的代码：

<template is="objectCombine" data="{{foo, bar}}"></template>

js中的代码：

Page({
  data: {
    foo: 'my-foo',
    bar: 'my-bar'
  }
})

即就是不写对应的值，只有键，会在data中找到根据键名对应的值进行匹配
上述方式可以随意组合，但是如有存在变量名相同的情况，后边的会覆盖前面

注意： 花括号和引号之间如果有空格，将最终被解析成为字符串

<view wx:for="{{[1,2,3]}} ">
  {{item}}
</view>

等同于

<view wx:for="{{[1,2,3] + ' '}}">
  {{item}}
</view>

这样如果要在后面加文字可以直接写而不用用连接符