ts 将100个元素,每行显示9个元素,然后显示出所有行的元素,由此我们延伸出一个项目需求的简单算法实现。

server/2024/11/14 0:40:09/

1、先看一下baidu ai出的结果:

2、我们将上面的代码修改下,定义一个数组,然后记录每行的行号及相应的元素:

<template><div>console</div>
</template>
<script setup lang="ts">
import { onMounted, reactive } from "vue";
const list = reactive([] as any[]);
function printRows(elementsCount: number, elementsPerRow: number): void {const rowsCount = Math.ceil(elementsCount / elementsPerRow);for (let i = 0; i < rowsCount; i++) {let row = "";for (let j = 0; j < elementsPerRow; j++) {const elementIndex = i * elementsPerRow + j;if (elementIndex < elementsCount) {row += `${elementIndex}, `;} else {break; // 超出元素总数,退出内层循环}}list.push({row: i,rowElements: row,});// console.log(row.trim().replace(/, $/, "")); // 移除末尾的逗号并打印}for(let i = 0; i < list.length; i++){console.log(list[i].row, list[i].rowElements)}
}onMounted(() => {printRows(100, 9);
});
</script>

3、我们再将上面的代码优化下,让其存对象。

代码:
 

<template><div>console</div>
</template>
<script setup lang="ts">
import { onMounted, reactive } from "vue";
const list = reactive([] as any[]);
function printRows(sourceList, elementsPerRow: number) {let elementsCount = sourceList.length;const rowsCount = Math.ceil(elementsCount / elementsPerRow);for (let i = 0; i < rowsCount; i++) {// let row = "";let rowList = [];for (let j = 0; j < elementsPerRow; j++) {const elementIndex = i * elementsPerRow + j;if (elementIndex < elementsCount) {rowList.push(sourceList[elementIndex]);} else {break; // 超出元素总数,退出内层循环}}list.push({row: i,rowElements: rowList,});// console.log(row.trim().replace(/, $/, "")); // 移除末尾的逗号并打印}for (let i = 0; i < list.length; i++) {console.log(list[i].row, list[i].rowElements);}
}onMounted(() => {printRows([{id: 1,name: "a",},{id: 2,name: "b",},{id: 3,name: "c",},{ id: 4, name: "d" },{id: 5,name: "e",},{id: 6,name: "f",},{id: 7,name: "g",},{id: 8,name: "h",},{id: 9,name: "i",},{id: 10,name: "j",},{id: 11,name: "k",},{id: 12,name: "l",},{id: 13,name: "m",},{id: 14,name: "n",},{id: 15,name: "o",},{id: 16,name: "p",},{id: 17,name: "q",},],9);
});
</script>

4、最后,项目有这样的需求:用户输入一串字符串,然后我们要根据串的情况,进行自动填到相应的位置上去,来达到整个canvas的输出,也就是达到输出到指定的位置上,但是用户输入情况比较复杂,所以我们就要根据canvas的宽度与高度来自动进行计算,最好我们就有了上面的处理。


http://www.ppmy.cn/server/140797.html

相关文章

基于交互多模型 (IMM) 算法的目标跟踪,使用了三种运动模型:匀速运动 (CV)、匀加速运动 (CA) 和匀转弯运动 (CT)。滤波方法为EKF

基于交互多模型 (IMM) 算法的目标跟踪&#xff0c;使用了三种运动模型&#xff1a;匀速运动 (CV)、匀加速运动 (CA) 和匀转弯运动 (CT)。滤波方法为EKF 文章目录 运行结果源代码运行结果详解代码详解概述主要功能代码详细介绍1. 初始化与仿真参数设置2. 定义模型参数3. 状态转移…

maven工程结构说明

1、maven工程文件目录 |-- pom.xml # Maven 项目管理文件 |-- src # 放项目源文件|-- main # 项目主要代码| |-- java # Java 源代码目录| | -- com/example/myapp…

【Pikachu】File Inclusion文件包含实战

永远也不要忘记能够笑的坚强&#xff0c;就算受伤&#xff0c;我也从不彷徨。 1.File Inclusion(文件包含漏洞)概述 File Inclusion(文件包含漏洞)概述 文件包含&#xff0c;是一个功能。在各种开发语言中都提供了内置的文件包含函数&#xff0c;其可以使开发人员在一个代码…

供应商srm管理,招投标管理,电子采购管理,在线询价,在线报价,供应商准入审核(java代码)

前言&#xff1a; 随着互联网和数字技术的不断发展&#xff0c;企业采购管理逐渐走向数字化和智能化。数字化采购平台作为企业采购管理的新模式&#xff0c;能够提高采购效率、降低采购成本、优化供应商合作效率&#xff0c;已成为企业实现效益提升的关键手段。系统获取在文末…

Python 爬虫使用 BeautifulSoup 进行 XPath 和 CSS 选择器定位

Python 中使用 BeautifulSoup 进行 XPath 和 CSS 选择器定位 在 Python 中&#xff0c;BeautifulSoup 是一个常用的 HTML 和 XML 解析库。它允许我们轻松地定位和提取网页中的特定元素。通常我们会使用 CSS 选择器来查找元素&#xff0c;然而&#xff0c;XPath 也是一种非常强…

[C++] GDB的调试和自动化检测

文章目录 GDB基本使用1. bazel的debug过程2. line-tables-only的使用 Reference GDB基本使用 参考文档&#xff1a; https://zhuanlan.zhihu.com/p/655719314 1. bazel的debug过程 需要带--copt-g --copt-ggdb选项进行编译 // bazel build --stripnever --copt-g --copt-ggd…

高级java每日一道面试题-2024年10月30日-JVM篇-新生代垃圾回收器和老生代垃圾回收器有哪些?有什么区别?

如果有遗漏,评论区告诉我进行补充 面试官: 新生代垃圾回收器和老生代垃圾回收器有哪些?有什么区别? 我回答: 在 Java 高级面试中&#xff0c;关于垃圾回收器&#xff08;Garbage Collector, GC&#xff09;的知识是非常重要的。Java 的垃圾回收机制主要分为新生代&#xf…

搞了十多年的企业信息化建设从互联网加营销到数字化转型,为什么企业管理效率反而更低了?

为何管理效率反而降低&#xff1f; 企业信息化建设&#xff0c;从互联网加营销到数字化转型&#xff0c;是现代企业经营的重要组成部分。然而&#xff0c;许多企业在实施信息化建设的过程中&#xff0c;却发现管理效率反而降低了。这究竟是为什么呢&#xff1f; 首先&#xf…