Question

有人可以帮助我使用v-for语句来循环这样的布局。

在这种情况下，我如何使用v-for？

Answer 1

您似乎在模板中添加了很多逻辑，并使用了三个循环实例。

<div id="app">
  <h2>Product:</h2>
  <div class="row" v-for="(sparator, index) in products" v-if="index % 5 == 0">
    <div class="col col-6" v-for="(product, key) in products" v-if="index <= key && key < (index + 2)">
      <label>{{ product.text }}</label>
    </div>

    <div class="col col-4" v-for="(product, key) in products" v-if="(index + 2) <= key && key < (index + 5)">
      <label>{{ product.text }}</label>
    </div>
  </div>
</div>

您可以将其简化为两个循环，在该循环中，类将根据键进行计算

<div id="app">
  <h2>Product:</h2>
  <div class="row" v-for="(sparator, index) in products" v-if="index % 5 == 0">
    <div class="col" :class="['col-' + ((key % 5 >= 2)?'4':'6')] v-for="(product, key) in products" v-if="index <= key && key < (index + 5)">
      <label>{{ product.text }}</label>
    </div>
  </div>
</div>

但是您仍然存在效率低下的问题，因为您要遍历整个数组多次，并且由于它们的嵌套方式，计算量呈指数增长。

由于使用数组，因此可以在嵌套循环中仅使用索引

<div id="app">
  <h2>Product:</h2>
  <div class="row" v-for="(sparator, index) in products" v-if="index % 5 == 0">
    <div class="col" :class="['col-' + ((key % 5 >= 2)?'4':'6')]" v-for="(product, key) in 5" v-if="products[index+key]">
      <label>{{ products[index+key].text }}</label>
    </div>
  </div>
</div>

https://jsfiddle.net/ystxow02/

但是，这仍然是（IMO）问题，因为您的模板不应如此复杂。这个想法是模板渲染布局，而不是计算布局。因此，我将使用computed以最易于在模板中使用的方式创建数据。

js：

  computed: {
    productLayout() {
        let s = [];
      this.products.forEach((p, i) => {
        let s_index = Math.floor(i / 5) * 2 + ((i % 5 >= 2)? 1 : 0);
        if (s[s_index] === undefined) {
            s[s_index] = {class:"row", products:[]};
        }
        let className = i%5 >= 2 ? 'col-4' : 'col-6';
        s[s_index].products.push({class:className, ...p})
      })
      console.log(s)
      return s;
    }
  }

模板：

<div id="app">
  <h2>Product:</h2>
  <div class="row" v-for="(s, i) in productLayout">
    <div class="col" :class="product.class" v-for="(product, k) in s.products">
      <label>{{ product.text }}</label>
    </div>
  </div>
</div>

https://jsfiddle.net/5pz2urn0/

在Vue JS中使用V-for循环不同的div

1 个答案: