微信小程序数据绑定

简单绑定

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

<input model:value="{{value}}" />

事件处理函数

Page 中还可以定义组件事件处理函数。在渲染层的组件中加入事件绑定，当事件被触发时，就会执行 Page 中定义的事件处理函数。

<view bindtap="viewTap"> click me </view>

代码示例

<view>数据绑定：{{motto}}</view>
<view wx:for="{{array}}">列表渲染：{{index}}: {{item.message}}</view>
<view wx:if="{{!condition}}">条件渲染wx:if: True </view>
<view hidden="{{!condition}}">条件渲染hidden: True </view>

wx:if与hidden的对比

• wx:if 以动态创建和移除元素的方式，控制元素的显示和隐藏
• hidden 以切换样式的方式（display：none/block），控制显示与隐藏

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }],
    condition: true
  }
  })

效果示例

具体可以参考官方文档：链接: 数据绑定|微信开放文档