我想将相同的v-for循环放入两个不同的<div> 有没有办法只使用一次v-for循环?

这是一个例子:

<div class="v-for-1">
  <div v-for="(item, index) in items" :key="index">
    blah blah
  </div>
</div>

<div class="v-for-2">
  <div v-for="(item, index) in items" :key="index">
    blah blah
  </div>
</div>

#1楼 票数:1

我不确定您到底想要实现什么,但是如果您想在同一循环中打印两个div,则可以执行以下操作:

    <div class="v-for-1">
      <div v-for="(item, index) in items" :key="index">
        <div> blah blah </div>
        <div> blah blah </div>
      </div>
    </div>

#2楼 票数:0 已采纳

您可以将v-for移至容器div并在其中多次使用。 在下面的示例中,您将创建2个可访问同一项目的div。

<div v-for="(item, index) in items" :key="index"
     class="parent-v-for">

  <div class="v-for-1">
    {{item}}
  </div>

  <div class="v-for-2">
    {{item}}
  </div>

</div>

#3楼 票数:0

您需要创建一个组件并调用两次:

vFor.vue

<div :class="YOUR_CLASS_FROM_PROPS">
 <div v-for="(item, index) in ITEMS_FROM_PROPS" :key="index">
   blah blah
 </div>
</div>

接着:

<vFor :items="ITEMS" :className="vfor-1" />
<vFor :items="ITEMS" :className="vfor-2" />

要么

<div v-for="(_, i) in [0, 1]" :key="index" :class="v-for`${i}`">
 <div v-for="(item, index) in items" :key="index">
   blah blah
 </div>
</div>

  ask by zoecode translate from so

未解决问题?本站智能推荐:

2回复

我可以在同一个div上创建条件v-for循环吗?

我很好奇是否有一种方法可以在其中包含条件语句的v-for循环,这样我可以减少程序中的冗余。 我有一个div标签,需要循环的tagfitlers如果对象tag_filters对象不存在,否则,我就需要在上环tag_fitlers对象。 这是我当前循环的一个片段: 我希望做这样的事情: 这可能
1回复

v-for循环中的模数

我在循环中显示div,我想根据循环索引绑定类。 所以我想达到的是索引0和1具有类col-6然后2,3,4具有索引col-4 ,然后5和6具有类col-6 ,依此类推。 因此,最终,我的div将如下所示: 等等.. 我找不到能以模数尝试但没有运气的模式。 目前,我的代码是:
1回复

在 v-for 循环中访问嵌套对象

我有一个返回对象数组的 API。 数组中的每个对象看起来像这样。 我正在使用 v-for 循环来呈现此类对象的数组。 我无法访问任何嵌套对象。 我无法访问 authorName。 我收到的错误消息是“无法读取未定义的属性‘authorName’”
2回复

使用v-for循环绑定不同的颜色背景

我正在使用vuetify,并尝试遍历包含要用作背景的不同十六进制代码的javascript对象。 最终结果将如下所示: 我试图将每个十六进制代码绑定到每个不同项目颜色的背景。 下面是我正在尝试做的事情: 这是数据对象:
1回复

v-for将单个对象与对象集合相同

我有一个对象(我们称它为employments )像 有时, employments将是一些对象的集合,例如: 如果我这样迭代 在第一个对象示例中给出的键(例如, employment.StartDate )将失败,因为v-for将遍历对象的键,而不是整个对象。 对象的
2回复

从v-for循环计算多个总计

我有一个独特的情况,我有一个v-for循环的用户(工作人员)和内部,我有另一个v-for循环检查用户累积的假。 所以简单地说 离开数据库内容具有这些值 类型:(病假,年假,丧亲等)时间:整数 所以基本上它会说 现在为代码和我到目前为止: <div v-f
1回复

多 每个v-for循环的元素

在我的Vue应用程序中,我正在遍历一系列学校。 每所学校都有一个名称,一组教师人数(每个年级一个)和一组学生人数(每个年级一个)。 以下代码有效,但这仅是因为我正在手动编码<td> 。 new Vue({ el: '#app', data: { schools
1回复

如何使用v-for循环遍历嵌套对象

我正在处理一些涉及卡信息的练习代码,在这些代码中,您可以通过单击屏幕上的其中一张卡来显示所选卡的详细信息。 如屏幕截图所示,如果您选择黄色卡之一,它将以绿色和蓝色背景色显示所选卡的更多详细信息。 我通过使用v-for循环实现了此功能,但是问题是详细的卡信息是一个JSON对