微信小程序开发(四) 数据绑定的三种用法

数据绑定使用双大括号将变量包起来。

即:{{变量名}},作用于页面内容、组件属性、控制组件

 

数据绑定控制页面内容和组件内容

如下所示:

WXML文件

<text style='color:{{color}};'>{{name}}</text>

JS文件 data部分

data: {
    name:'张三丰',
    color:'blue'
  },

效果如下:

微信小程序开发(四) 数据绑定的三种用法

这样我们就可以动态链接一些信息,用于动态改变页面信息

 

控制组件

在WXML中,使用 wx:if 和 数据绑定 来判断是否显示该代码块

js文件data部分

微信小程序开发(四) 数据绑定的三种用法

WXML文件部分

微信小程序开发(四) 数据绑定的三种用法

 

微信小程序开发(四) 数据绑定的三种用法

结果什么都不显示。因为flag这个时候是false

我们将flag改为true

微信小程序开发(四) 数据绑定的三种用法

微信小程序开发(四) 数据绑定的三种用法

这个时候显示出true