【微信小程序】WXML语法——数据绑定

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

文章目录

一，基本原则

首先我们对数据绑定进行简单的介绍，这是微信

WXML

模板语法中比较重要的一块。数据绑定简单理解，其实就是我们在某页面的

WXML

中动态地对数据进行绑定，然后在逻辑层，也就是在当前页面的

JS

文件中，操控数据。

这个思想其实就是我们之前说到的

MVVM

开发模式，我们只需要通过控制JS中的状态，就直接对页面进行操控，达到渲染与逻辑分离的效果。

数据绑定的基本原则就是，在

JS

文件中的

data

中动态操控数据，而在页面的

wxml

文件将数据绑定。

在

wxml

文件的数据绑定需要遵循

Mustache

语法，简述就是——用双大括号将变量包住。

如下我们举一个栗子：
我们在

js

文件操控文件

data:{info:"hello world"}

然后进行数据绑定

<view>{{info}}</view>

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

我们也可称为插值表达法。

二，场景使用

上面我们对数据绑定的基本原则以及基础用法做了一定讲解，那么接下来牛牛带大家一起来看看数据绑定有哪些使用场景。

2.1 绑定内容

也就是用JS直接操控页面上显示的内容，这个就是我们上次举的一个小小的栗子，这里就不做赘述。

2.2 绑定属性

没错，我们还可以动态绑定元素属性的值，直接用JS操控属性值。

原则不变，只是在

WXML

文件中，我们用双括号将变量绑定时，需要在外面加上引号，以便编译器能够读懂。

下面带出一个小案例方便理解

在页面的

JS

文件中，我们在data对象的定义与之前一致。

data:{attrdata:"widthFix"}

在页面的

wxml

文件如此绑定：

<imagesrc="01.jpg"mode="{{attrdata}}"></image>

这样，我们对实现了动态绑定属性啦。

2.3 三元运算

数据绑定中，在

WXML

中的操作，比较常见的还有三元运算，没错，就是你C语言中学的三元运算符（默认你们学了），通过三元运算，我们可以有更多的选择，也更加方便地实现数据的操控输出。

小小讲解——三元运算格式如下

表达式1 ? 表达式2 ：表达式3

如果表达式1为

true

，返回表达式2，反之返回表达式3。

继续来一个小小的案例说明
在JS文件，我们用一个

random

方法获取随机数

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

接着在

wxml

文件中，我们使用三元运算

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

2.4 算术运算

在数据绑定中，我们还可以进行一定的算术运算，也就是在

wxml

渲染层获取到逻辑层发来的数据后，可以对数据进行算术运算。

如此，就不需要我们在JS文件中多写一个回调函数用来进行算术运算，非常的方便和银杏化。

下面还是用栗子说明
在JS文件中，我们同样通过

random

方法，获取随机数

data:{randomNum: Math.random()*10}

wxml

文件如下

<view>{{randomNum * 2}} </view>

输出随机数的二倍值。

数据绑定比较常用的应用场景就如上所示，本次的知识比较简单，但是是必须记住的知识点，那么小伙伴们，你们记住了吗？

🍒本文到这里就结束啦，如果觉得对您有帮助的话，可以关注牛牛 后续的文章，感谢您的支持，我们下次再见！

债见~~