微信小程序中WXML语法-----数据绑定

一、必须明确

wxml中的动态数据是来自js文件中Page中的Data，所以我们要创造动态数据就需要先在Data中准备数据。

二、怎么用

在Data中的数据已经准备好了，怎么用?
答：使用 Mustache 语法（双大括号）将变量包起来

1、在标签中的内容使用

准备数据（在.js文件中的Page下的Data中）

使用数据（在.wxml文件中使用）

效果截图

2、在组件属性中使用（即[id="{{数据名称}}"][class="[{{数据名称}}]等）

准备数据（在.js文件中的Page下的Data中）

使用数据（在.wxml文件中使用）

效果截图

3、在控制属性中使用（即[wx:if="{{数据名称}}"][wx:for="{{数据名称}}"]等）

准备数据（在.js文件中的Page下的Data中）

使用数据（在.wxml文件中使用）

效果截图

4、在关键字中使用（如复选框，即使用bool类型充当属性checked）

准备数据：准备的数据就是boolean类型

使用数据（在.wxml文件中使用）

效果截图

5、在算术运算中的使用（如加减乘除）

准备数据

使用数据（在.wxml文件中使用）

效果截图

6、在三元运算中的使用

直接在wxml文件中使用

效果截图

7、在逻辑运算中的使用

准备数据

使用数据

效果截图

8、在拼接字符串中使用

准备数据

使用数据

效果截图

9、在数据路径的运算中使用

准备数据

使用数据

效果截图

10、在{{}}内进行组合，构造成一个新的数组或对象

准备数据

使用数据

效果截图

三、写在后面

以上是自己在学习微信小程序时的一点小总结，有出错的地方，欢迎读者朋友们评论指正，谢谢。