微信小程序（黑马）|【微信小程序】WXML语法——数据绑定前端|小程序|微信|微信小程序

观众老爷们好呀，考试终于结束了，牛牛立马更文来庆祝一下。上文我们对小程序的运行机制和更新机制进行了讲解，那么接下来我们进入WXML模板语法——数据绑定，期待吗，那我们现在就开始吧！
本节在开发中会经常用到，快拿小本本记下来呀！

文章图片

文章目录

- 一，基本原则
- 二，场景使用
- - 2.1 绑定内容
  - 2.2 绑定属性
  - 2.3 三元运算
  - 2.4 算术运算

一，基本原则首先我们对数据绑定进行简单的介绍，这是微信WXML模板语法中比较重要的一块。数据绑定简单理解，其实就是我们在某页面的WXML中动态地对数据进行绑定，然后在逻辑层，也就是在当前页面的JS文件中，操控数据。
【微信小程序（黑马）|【微信小程序】WXML语法——数据绑定】这个思想其实就是我们之前说到的MVVM开发模式，我们只需要通过控制JS中的状态，就直接对页面进行操控，达到渲染与逻辑分离的效果。
数据绑定的基本原则就是，在JS文件中的data中动态操控数据，而在页面的wxml文件将数据绑定。
在wxml文件的数据绑定需要遵循Mustache语法，简述就是——用双大括号将变量包住。
如下我们举一个栗子：
我们在js文件操控文件

data : { info : "hello world" }

然后进行数据绑定

{{info}}

由此，我们就可以在页面动态控制显示的数据，该案例显示如下图：

文章图片

我们也可称为插值表达法。
二，场景使用上面我们对数据绑定的基本原则以及基础用法做了一定讲解，那么接下来牛牛带大家一起来看看数据绑定有哪些使用场景。
2.1 绑定内容
也就是用JS直接操控页面上显示的内容，这个就是我们上次举的一个小小的栗子，这里就不做赘述。
2.2 绑定属性
没错，我们还可以动态绑定元素属性的值，直接用JS操控属性值。
原则不变，只是在WXML文件中，我们用双括号将变量绑定时，需要在外面加上引号，以便编译器能够读懂。
下面带出一个小案例方便理解
在页面的JS文件中，我们在data对象的定义与之前一致。

data :{ attrdata : "widthFix" }

在页面的wxml文件如此绑定：

这样，我们对实现了动态绑定属性啦。
2.3 三元运算
数据绑定中，在WXML中的操作，比较常见的还有三元运算，没错，就是你C语言中学的三元运算符（默认你们学了），通过三元运算，我们可以有更多的选择，也更加方便地实现数据的操控输出。
小小讲解——三元运算格式如下
表达式1 ? 表达式2 ：表达式3
如果表达式1为true，返回表达式2，反之返回表达式3。
继续来一个小小的案例说明
在JS文件，我们用一个random方法获取随机数

data :{ randomNum : Math.random()*10//随机获取一个小于10的数字 }

接着在wxml文件中，我们使用三元运算

{{randomNum >= 5 : "大于等于5" ? "小于5" }}

2.4 算术运算
在数据绑定中，我们还可以进行一定的算术运算，也就是在wxml渲染层获取到逻辑层发来的数据后，可以对数据进行算术运算。
如此，就不需要我们在JS文件中多写一个回调函数用来进行算术运算，非常的方便和银杏化。
下面还是用栗子说明
在JS文件中，我们同样通过random方法，获取随机数