【已验证】微信小程序开发-绑定数据23.10.09

四. 绑定数据

WXML页面里的动态数据都是来自.js 文件Page的data，数据绑定就是通过双大 括号（{{}}）将变量包起来，在WXML页面 里将数据值显示出来。

 {{ message }} 

// pages/product/product.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    message: 'Hello MINA!'
    
  },

(一) 组件属性绑定

组件属性绑定是将data里的数据绑定 到微信小程序的组件上。

 {{ message }} 
 

// pages/product/product.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    message: 'Hello MINA!',
    id: 0
    
  },

(二) 控制属性绑定

控制属性绑定用来进行if语句条件 判断，如果满足条件，则执行，否则 不执行，示例代码如下

 {{ message }} 
 
 是否显示

// pages/product/product.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    message: 'Hello MINA!',
    id: 0,
    condition: true
    
  },

(三) 关键字绑定

关键字绑定常用于组件的一些关键字，像复选框组件一样。checked关键字如果等于true 则代表选中复选框，false则代表不选中复选框。

 {{ message }} 
 
 是否显示
 
 

五. 条件渲染

(一) wx:if 判断单个条件

在微信小程序框架里，使用 wx:if=”{{condition}}” 来判断是否需要渲染该代码块，使用 wx:elif 和 wx:else 来添加一个 else 块，示例代码如下

 {{ message }} 
 
 是否显示
 
 

 True 
 1 
 2 
 3 

// pages/product/product.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    message: 'Hello MINA!',
    id: 0,
    condition: true,
    length:9
    
  },

(二) block wx:if 判断多个组件

因为 wx:if 是一个控制属性，需要 将它添加到一个标签上。但是，如果 我们想一次性判断多个组件标签，则 可以使用一个  标签将多个组 件包装起来，并在其上使用 wx:if 控制 属性。

	 view1 
	 view2 

六. 列表渲染

(一) wx:for 列表渲染单个组件

使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前 下标的变量名，示例代码如下。

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：

(二) block wx:for 列表渲染多个组件

wx:for应用在某一个组件上，但 是如果想渲染一个包含多节点的结构 块，wx:for就需要应用在标签 上，示例代码如下

	 {{index}}: 
	 {{item}} 



	{{idx}}: {{itemName.message}}

 data: {
    message: 'Hello MINA!',
    id: 0,
    condition: true,
    length:9,
    
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]


  },