微信小程序 数据绑定

 

微信小程序 数据绑定

WXML 中的动态数据均来自对应 Page 的 data。

数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：

内容：

<view> {{ message }} </view>
Page({
  data: {
    message: 'Hello Word'
  }
})

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

<view id="item-{{id}}">hello world</view>
Page({
  data: {
    id: 110
  }
})

 

控制属性（需要在双括号内）：

<view wx:if="{{isShow}}">Hello World!</view>

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

可以在 {{}} 内进行简单的运算，支持的有如下几种方式：

三元运算

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

 算数运算

<view> {{a + b}} + {{c}} + d </view>
Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})

view中的内容为 3 + 3 + d。