微信小程序学习记录之标签语法

小程序的数据绑定主要通过WXML标签语言实现的。这种类似MVVM的方式，但是标签和VUE有点差异。

WXML（WeiXin Markup Language）

WXML是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。WXML 中的动态数据均来自对应 Page 的 data。
1）数据绑定
1、简单绑定
数据绑定使用 Mustache 语法（双大括号{{ }}）将变量包起来，可以作用于：
内容

<!--wxml-->
<view> {{message}} </view>

// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

组件属性(需要在双引号之内)

<view id="item-{{id}}"> </view>

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

控制属性(需要在双引号之内)

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

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

关键字(需要在双引号之内)
true：boolean 类型的 true，代表真值。
false： boolean 类型的 false，代表假值。

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

特别注意：不要直接写 checked=“false”，其计算结果是一个字符串，转成 boolean 类型后代表真值。
运算
可以在 {{}} 内进行简单的运算，支持的有如下几种方式：

三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view>

算数运算

<view> {{a + b}} + {{c}} + d </view>

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

view中的内容为 3 + 3 + d。
逻辑判断

<view wx:if="{{length > 5}}"> </view>

2）列表渲染
3）条件渲染
4）模板

数据绑定、列表渲染、条件渲染、模板、引用