小程序----数据绑定

1 数据绑定的基本原则

2 在 data 中定义页面的数据

在页面对应的 .js 文件中，把数据定义到 data 对象中即可：

// pages/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 页面的数据
    info: '页面的数据'
  }
  
})

3 Mustache 语法的格式（插值表达式）

把data中的数据绑定到页面中渲染，使用 Mustache 语法（双大括号）将变量包起来即可。语法格式为：

<!--pages/list/list.wxml-->
<view>{{ info }}</view>

3.1 Mustache 语法的应用场景

Mustache 语法的主要应用场景如下：

绑定内容
绑定属性
运算（三元运算、算术运算等）

3.2 动态绑定内容

页面的数据如下：

// pages/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    info: 'init data'
  }

})

页面的结构如下：

<!--pages/list/list.wxml-->
<view>{{ info }}</view>

3.3 动态绑定属性

页面的数据如下：

// pages/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    info: 'init data',
    imgSrc: 'https://s.cn.bing.net/th?id=OIP-C.hqD6F7mzf_dRi1UuJRegrgAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2'
  }

})

页面的结构如下：

<!--pages/list/list.wxml-->
<view>{{ info }}</view>
<image src="{{imgSrc}}"></image>

3.4 三元运算

页面的数据如下：

// pages/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    info: 'init data',
    imgSrc: 'https://s.cn.bing.net/th?id=OIP-C.hqD6F7mzf_dRi1UuJRegrgAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',
    // 生成10以内的随机数
    randNum: Math.random()*10
  }

})

页面的结构如下：

<!--pages/list/list.wxml-->
<view>{{ info }}</view>
<image src="{{imgSrc}}"></image>
<view>{{ randNum>=5 ? '随机数大于等于5' : '随机数小于5' }}</view>

3.5 算数运算

页面的数据如下：

// pages/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    info: 'init data',
    imgSrc: 'https://s.cn.bing.net/th?id=OIP-C.hqD6F7mzf_dRi1UuJRegrgAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2',
    // 生成10以内的随机数
    randNum: Math.random()*10
  }

})

页面的结构如下：

<!--pages/list/list.wxml-->
<view>{{ info }}</view>
<image src="{{imgSrc}}"></image>
<view>{{ randNum }}</view>
<view>{{ randNum>=5 ? '随机数大于等于5' : '随机数小于5' }}</view>
<view>{{ randNum * 10 }}</view>