如何循环遍历一个 Div 元素块 N 次？

Posted 2023-02-22

【中文标题】如何循环遍历一个 Div 元素块 N 次？

【英文标题】：How to loop through a block of Div element N number of times?

【发布时间】：2021-10-26 03:51:46

【问题描述】：

我正在尝试将卡片彼此相邻显示（每行 4 张卡片）。这是我的卡片 html：

    <div class="HelloWorldCard">
        <div class="cardwithlink">
            <div class="row">              
                <div class="Hellocard cardwithlink style="height: 170px;">
                    <a href="//www.https://www.google.com/" title="Google home page" target="">
                        <div class="content">
                            <div class="HelloTopSection" style="height: 110px;">
                                <div class="HelloCardTitle"> title </div>
                                <div class="HelloCardExcerpt"> description </div>
                            </div>
                        </div>
                    </a>
                </div>               
            </div>
        </div>
    </div>

<Script>
export default
name: "HelloWordCard",
props:
title: String,
description: String
,
;

我想在我的页面上显示大约 100 张卡片。我不能只是复制和过去这个 html 100 次，因为那会浪费时间。是否可以循环打印出这段 html 100 次？

我遇到的真正问题是卡片每行显示 1 张卡片。我试图让它们在每行显示 4 个。

【问题讨论】：

你可以试试 array.map() 方法吗？

@DanielprabhakaranN 不确定这将如何工作。可以演示吗？

你能提供你的代码的完整sn-p吗？喜欢codeandbox？

这能回答你的问题吗？ Vue Js - Loop via v-for X times (in a range)

vuejs.org/v2/guide/list.html

【参考方案1】：

你的行不应该在你的卡片组件内。

它应该在持有卡片的父组件中，您可以在其中应用@Srijan Katuwal 的 CSS。例如：

<template>
  <div id="app">
    <div class="row">
      <HelloWorldCard
        v-for="index in 100"
        :key="index"
        title="Test"
        description="Test description"
      />
    </div>
  </div>
</template>

<script>
import HelloWorldCard from "./components/HelloWorldCard";

export default 
  name: "App",
  components: 
    HelloWorldCard,
  ,
;
</script>

<style>
.row 
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 30px;

</style>

你的组件现在是：

<template>
  <div class="Hellocard cardwithlink" style="height: 170px">
    <a href="//www.https://www.google.com/" title="Google home page" target="">
      <div class="content">
        <div class="HelloTopSection" style="height: 110px">
          <div class="HelloCardTitle"> title </div>
          <div class="HelloCardExcerpt"> description </div>
        </div>
      </div>
    </a>
  </div>
</template>

<script>
export default 
  name: "HelloWordCard",
  props: 
    title: String,
    description: String,
  ,
;
</script>

你可以在这里看到它的实际效果：https://codesandbox.io/s/hungry-hodgkin-2sklq?file=/src/App.vue:0-476

【参考方案2】：

您可以使用 v-for 指令将 div 块显示 n 次。 Vue官方文档有类似的例子v-for

另外，要在一行中显示 4 张卡片，您可以使用 CSS 网格或 flex。网格实现可以如下完成

.row 
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 30px;

【讨论】：

无法看到这在我的情况下是如何工作的。

【参考方案3】：

您需要编写以下 CSS 以显示彼此相邻的卡片

* 
  box-sizing: border-box;

.row 
    display: block;
    width: 100%;


.card 
   display: block;
   float: left;
   width: 25%;
   padding: 10px;
   border: 1px solid grey;
 

<div class="row">
  
  <div class="card">Card Data</div>
  <div class="card">Card Data</div>
  <div class="card">Card Data</div>
  <div class="card">Card Data</div>
  <div class="card">Card Data</div>
  <div class="card">Card Data</div>
</div>