微搭低代码入门05循环

目录

  • 1 for 循环
  • 2 while 循环
  • 3 do...while 循环
  • 4 break 语句
  • 5 循环展示组件
  • 总结

在编程中,循环是一种非常强大的控制结构,它允许我们重复执行一段代码直到满足某个条件为止。在微搭中,我们一般用循环来处理我们数据库返回的结果。

在微搭中,每一个数据源返回的数据有一个records属性,他里边就是用数组来存储我们的数据。本篇我们分别介绍循环在自定义方法中的使用,和循环组件的使用。

1 for 循环

for 循环是最常用的循环结构之一,它允许我们指定循环的初始表达式、循环条件和迭代表达式。

语法:

for (初始化表达式; 循环条件; 迭代表达式) {// 循环体
}

示例:
1、正向打印数字

for (let i = 1; i <= 5; i++) {console.log(i);
}
// 输出: 1 2 3 4 5

2、逆向打印数字

for (let i = 5; i >= 1; i--) {console.log(i);
}
// 输出: 5 4 3 2 1

3、使用循环迭代数组

for 循环也可以用来迭代数组中的元素。

const fruits = ['Apple', 'Banana', 'Cherry'];for (let i = 0; i < fruits.length; i++) {console.log(fruits[i]);
}
// 输出: Apple Banana Cherry

4、嵌套循环

嵌套循环是指在一个循环内部再嵌套一个或多个循环。

for (let i = 1; i <= 3; i++) {for (let j = 1; j <= 3; j++) {console.log(`i = ${i}, j = ${j}`);}
}
// 输出:
// i = 1, j = 1
// i = 1, j = 2
// i = 1, j = 3
// i = 2, j = 1
// i = 2, j = 2
// i = 2, j = 3
// i = 3, j = 1
// i = 3, j = 2
// i = 3, j = 3

2 while 循环

while 循环会在指定的条件为真时重复执行一段代码。

语法:

while (条件) {// 循环体
}

示例:

let i = 1;
while (i <= 5) {console.log(i);i++;
}
// 输出: 1 2 3 4 5

3 do…while 循环

do…while 循环与 while 循环类似,但不同的是,do…while 循环至少会执行一次,即使条件一开始就是假的。

语法:

do {// 循环体
} while (条件);

示例:

let i = 1;
do {console.log(i);i++;
} while (i <= 5);
// 输出: 1 2 3 4 5

4 break 语句

break 语句用于立即退出循环,即使循环条件仍然为真。

示例:

for (let i = 1; i <= 10; i++) {if (i === 5) {break; // 当 i 等于 5 时,退出循环}console.log(i);
}
// 输出: 1 2 3 4

5 循环展示组件

理解了上边的循环的语法和使用场景之后,我们看一下微搭封装的一个循环展示组件
在这里插入图片描述
右侧的属性里有一个数据,其实就类似于我们如果需要循环迭代数组的时候,你先需要定义一个变量。默认属性是一个固定的内容,这里我们可以自己定义

一种方案我们是创建一个变量,类型选择数组
在这里插入图片描述
数组我们可以进行初始化,一般我们是在页面的加载的时候,通过调用数据源的API来给数组进行赋值

在这里插入图片描述
然后再将变量绑定到数据上,在循环展示里边的组件相当于我们的循环体,循环体我们在代码里是通过数组的索引来获取的,在微搭里我们可以从repeater里去取对应的属性,组件示例里是通过表达式取的值

$w.index_repeater1 + `: ` + $w.item_repeater1.name

理解了这一部分,在列表页、首页、我的页面会大量用到类似的语法,你的功能就有了着落不至于胡乱绑定属性了

总结

我们本篇介绍了循环的具体语法,介绍了三种循环结构包括for、while、do…while循环,结合具体的语法介绍了循环展示组件的用法。编程如果能够理解循环语句的用法相当于懂了一半,剩下就是结合需求开发功能了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/472291.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

11.13机器学习_线性回归

十 集成学习方法之随机森林 机器学习中有一种大类叫集成学习&#xff08;Ensemble Learning&#xff09;&#xff0c;集成学习的基本思想就是将多个分类器组合&#xff0c;从而实现一个预测效果更好的集成分类器。集成算法可以说从一方面验证了中国的一句老话&#xff1a;三个…

活动|华院计算作为联盟理事单位出席进博会全球人工智能合作论坛

第七届中国国际进口博览会&#xff08;进博会&#xff09;于11月5日至10日在上海举行&#xff0c;作为本次进博会的重要配套活动&#xff0c;首届人工智能全球合作论坛也于9日圆满落幕。本次论坛由全球招商中心委员会、人工智能全球合作论坛组委会主办&#xff0c;中国国际科技…

2、开发工具和环境搭建

万丈高楼平地起&#xff0c;学习C语言先从安装个软件工具开始吧。 1、C语言软件工具有两个作用 1、编辑器 -- 写代码的工具 2、编译器 -- 将代码翻译成机器代码0和1 接下来我们介绍两种C语言代码工具&#xff1a;devcpp 和 VS2019&#xff0c;大家可以根据自己的喜好安装。 dev…

【Qt实现虚拟键盘】

Qt实现虚拟键盘 &#x1f31f;项目分析&#x1f31f;实现方式&#x1f31f;开发流程 &#x1f31f;项目分析 需求&#xff1a;为Linux环境下提供可便捷使用的虚拟键盘OS环境&#xff1a;Windows 7/11、CentOS 7开发语言&#xff1a;Qt/C IDE&#xff1a;QtCreator 、Qt5.14.2功…

领夹麦克风哪个品牌好,手机领夹麦克风哪个牌子好,选购推荐

​无线麦克风凭借其无与伦比的便携性与灵活性&#xff0c;成为在演讲、表演以及会议等多种场合中不可或缺的有力帮手。它挣脱了线缆的束缚&#xff0c;使得声音的传播更加自由自在。其操作十分简便&#xff0c;只需简单配对就能投入使用&#xff0c;从而可以轻松地适应各类场景…

ADC输出码和输入电压转换关系

ADC输出码和输入电压转换关系 转换公式&#xff1a;ADC输出码(Vin / Vref) *2n 。其中Vin 是输入ADC芯片的电压&#xff0c;Vref是参考电压&#xff0c;n是ADC芯片的位数。 举个例子MS5182是一个16bit的ADC&#xff08;21665536&#xff09;&#xff0c;参考电压Vref4.096V&a…

IROS讲座:如何写出受欢迎的论文

讲座原名称&#xff1a;How to write papers people love reading 时间地点&#xff1a;2024年10月中旬&#xff0c;阿布扎比国家展览中心&#xff0c;阿联酋 演讲嘉宾照片&#xff1a; 以下是拍摄的部分PPT&#xff0c;并添加了中文笔记&#xff1a;

【Docker】Mac安装Docker Desktop导致磁盘剩余空间较少问题如何解决?

目录 一、背景描述 二、解决办法 三、清理效果 四、理论参考 解决方法 1. 清理未使用的 Docker 镜像、容器和卷 2. 查看 Docker 使用的磁盘空间 3. 调整 Docker 的存储位置 4. 增加磁盘空间 5. 调整 Docker Desktop 配置 6. 使用 Docker 清理工具&#xff08;例如 D…

Tiktok对接和内容发布申请流程

这段时间在搞AI生成视频&#xff0c;希望用户能一键发布到Tiktok&#xff0c;因此研究了一下Tiktok的开发者申请流程&#xff0c;发现好复杂&#xff0c;同时也发现Tiktok的开发也跟我一样&#xff0c;挺草台班子的 0、流程简述 废话不多说&#xff0c;Tiktok的开发者申请和…

Android ART知多少?

Android 虚拟机 ART&#xff08;Android Runtime&#xff09;是 Android 平台上的应用程序运行时环境&#xff0c;用于执行应用程序的字节码。ART 自 Android 5.0&#xff08;Lollipop&#xff09;开始取代了 Dalvik&#xff0c;成为 Android 的默认运行时环境。本文将从以下几…

黑马嵌入式开发入门模电基础学习笔记

学习视频: 黑马程序员嵌入式开发入门模电&#xff08;模拟电路&#xff09;基础 文章目录 背景介绍电流电压组件仿真三极管ne555PCBEDA案例&#xff1a;非接触式电笔案例&#xff1a;电子琴 背景介绍 电流 电压 组件 仿真 三极管 mos管 ne555 PCB EDA 案例&#xff1a;非接触…

Ubuntu 18 EDK2 环境编译

视频&#xff1a;在全新的Ubuntu上从零搭建UEFI的EDK2开发环境 开始&#xff1a;git clone https://github.com/tianocore/edk2.git 开始编译BaseTools前先更新一下子模块&#xff1a;git submodule update --init &#xff0c;然后&#xff1a;make -C BaseTools/ 问题1&a…

第9章 DIV+CSS布局

9.1 DIVCSS概述 DIVCSS是Web设计标准&#xff0c;它是一种网页的布局方法。与传统中通过表格&#xff08;table)布局定位的方式不同&#xff0c;它可以实现网页页面内容与表现相分离。DIV组成了网页的格局&#xff0c;CSS则装饰了格局&#xff0c;比如建一栋房子&#xff0c;…

QT QLineEdit失去焦点事件问题与解决

本文介绍如何获得QLineEdit的失去焦点事件和获得焦点的输入框也会触发失去焦点事件的问题&#xff01; 目录 一、QLineEdit获得失去焦点事件 1.自定义类继承自QLineEdit 2.重写 focusOutEvent 3.使用 二、失去焦点事件问题 1.问题描述 2.问题解决 三、源码分享 lineed…

微信小程序navigateTo:fail webview count limit exceed

theme: nico 你们好&#xff0c;我是金金金。 场景 uniapp编写微信小程序&#xff0c;使用uni.navigateTo跳转的过程中报错如下&#xff1a; 报错意思也非常明显了&#xff1a;errMsg":"navigateTo:fail webview 数量超出限制 排查 排查之前我先贴一下代码 代码非…

HarmonyOS ArkTs 解决流式传输编码问题

工作日志 日期&#xff1a;2024-11-15 标题&#xff1a;HarmonyOS ArkTs 解决流式传输编码问题 问题描述 问题&#xff1a;在处理流式数据的 HTTP 请求时&#xff0c;服务器返回的数据存在编码问题&#xff0c;导致数据无法正确地解码为字符串。部分数据在解码后出现了乱码…

Android Settings 单元测试 | 如何运行单元测试?

背景 在Android Settings 单元测试 | Telephony Network 模块 APN 案例中粗略介绍了单元测试逻辑内容&#xff0c;但是在独立APK里面如何将单元测试跑起来还是有疑问&#xff0c;因为APP不能直接install&#xff0c;无法借助Android Studio直接Run&#xff0c;在安装的一步会报…

flutter字体大小切换案例 小字体,标准字体,大字体,超大字体案例

flutter字体大小切换案例 小字体&#xff0c;标准字体&#xff0c;大字体&#xff0c;超大字体案例 Android iOS设备带有选择记录 我的flutter项目版本 environment: sdk: ‘>3.4.4 <4.0.0’ 图片案例 pubspec.yaml 添加依赖 # 屏幕尺寸适配 https://github.com/OpenF…

编译原理(手绘)

大家好&#xff0c;今天给大家分享一下我自己对c语言编译链接的一点见解&#xff08;本人是学生&#xff0c;有记笔记的习惯&#xff09;&#xff0c;那么今天就给大家分享我的笔记。 以上只是我本人的一些见解&#xff0c;并非绝对&#xff0c;欢迎大家一起交流。 那么今天分…

跳房子(弱化版)

题目描述 跳房子&#xff0c;也叫跳飞机&#xff0c;是一种世界性的儿童游戏&#xff0c;也是中国民间传统的体育游戏之一。 跳房子的游戏规则如下&#xff1a; 在地面上确定一个起点&#xff0c;然后在起点右侧画 n 个格子&#xff0c;这些格子都在同一条直线上。每个格子内…