两个不同的相同 v-for 循环<div></div><div id="text_translate"><p>我想将相同的v-for循环放在两个不同的&lt;div&gt;中。 有没有办法只使用一次v-for循环？</p><p> 这是一个例子：</p><pre class="lang-html prettyprint-override"> &lt;div class="v-for-1"&gt; &lt;div v-for="(item, index) in items":key="index"&gt; blah blah &lt;/div&gt; &lt;/div&gt; &lt;div class="v-for-2"&gt; &lt;div v-for="(item, index) in items":key="index"&gt; blah blah &lt;/div&gt; &lt;/div&gt;</pre></div>

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

或者

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