一、数据绑定的基本原则
前面已经介绍完了小程序的一些常用组件,剩下组件的讲解会在后续讲解。不过接下来先来讲解一下WXML模板语法,让我们原文再续,书接上回。
1、数据绑定的基本原则
之前学过 Vue
的都知道 Vue
语法里也有数据绑定这个概念,而 WXML
里的数据绑定也是跟他类似的,也可以实现数据的单向或双向绑定。 数据绑定的基本原则有两点:
- 在JS文件中的data中定义数据;
- 页面的wxml文件中使用数据;
基本上就是在 JS
端操作数据,WXML
端进行绑定并显示,其中 WXML
中的动态数据均来自对应 Page
的 data
。下面就来讲解一下怎么实现这个数据绑定的过程。
2、在data中定义页面的数据
在页面对应的 .js
文件中,前面讲到了 WXML 的动态数据来自于 JS 端中的 data 对象,所以把数据定义到 data
对象中即可;
Page({ /** * 页面的初始数据 */ data: { // 字符串类型的数据 info: 'Nice 十连双黄', }, })
3、Mustache语法的格式
把data中的数据绑定到页面中渲染,使用 Mustache 语法(简单点就两大括号)将变量包起来即可。语法格式为
<view>{{info}}</view>
也可以称为插值表达式,自此,就可以在页面动态控制显示的数据,效果如下所示:
二、应用场景
Mustache
语法的主要应用场景如下:绑定内容、绑定属性、运算(三元运算、算术运算等);
1、绑定内容
上面刚刚讲解的栗子就是动态绑定内容,这里还是简单讲一下具体结构吧:
cshPageData.js:
Page({ /** * 页面的初始数据 */ data: { // 字符串类型的数据 info: 'Nice 十连双黄', }, })
cshPageData.wxml:
<view>{{info}}</view>
运行结果就不做展示了。
2、绑定属性
除了可以动态绑定内容以外,还可以绑定组件中的属性,这里就以 image
组件为例来讲解。
cshPageData.js:
Page({ /** * 页面的初始数据 */ data: { // 字符串类型的数据 info: 'Nice 十连双黄', // 图片路径 imgSrc: '/images/cshTest2.jpg' }, })
cshPageData.wxml:
<view>{{info}}</view> <image src="{{imgSrc}}" mode="widthFix"></image>
这样就实现了动态绑定属性了。
3、运算
Mustache
语法中还可以进行运算,也就是在 WXML
中获取到 JS
端的数据时,可以对其进行运算在显示或者做判断。 比如常见的三元运算和算术运算。
- 三元运算
语法结构:表达式1 ? 表达式2 :表达式3,接下来可以来围绕着当前数是否大于等于50来讲解来该操作;
cshPageData.js:
使用 Math.random()
函数来随机生成0到99的数;
Page({ /** * 页面的初始数据 */ data: { // 生成随机数 randomNum: Math.random() * 100 }, })
cshPageData.wxml:
在WXML 处理数据;
<view>{{randomNum >= 50 ? '当前数大于等于50' : '当前数小于50'}}</view> <view>{{info}}</view> <image src="{{imgSrc}}" mode="widthFix"></image>
可以来看一下效果:
- 算术运算
在WXML中对数据进行算术运算更加方便地实现数据的操控输出。
cshPageData.js:
使用 Math.random()
函数来随机生成0到99的数;
Page({ /** * 页面的初始数据 */ data: { // 生成随机数 randomNum: Math.random() * 100 }, })
cshPageData.wxml:
在WXML 处理数据;
<view>生成100以内的随机数:{{randomNum}}</view> <view>{{randomNum >= 50 ? '当前数大于等于50' : '当前数小于50'}}</view> <view>{{info}}</view> <image src="{{imgSrc}}" mode="widthFix"></image>
可以来看一下效果:
总结
感谢观看,这里就是WXML 模板语法 - 数据绑定的介绍使用,如果觉得有帮助,请给文章点个赞吧,让更多的人看到。🌹 🌹 🌹
也欢迎你,关注我。👍 👍 👍
原创不易,还希望各位大佬支持一下,你们的点赞、收藏和留言对我真的很重要!!!💕 💕 💕 最后,本文仍有许多不足之处,欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正!下期再见。