Question

我想将相同的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>

Answer 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>

Answer 2

您可以将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>

Answer 3

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

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" />

OR

<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>

两个不同的<div>中的相同v-for循环

3 个答案: