Question

我有一系列项目，如项目1＆＃39;，＆＃39;项目2＆＃39;至项目25＆＃39;。我希望渲染后的HTML看起来像这样：

<div class="row">
   <div>Item 1</div>
   <div>Item 2</div>
   <div>Item 3</div>
   <div>Item 4</div>
   <div>Item 5</div>
</div>
<div class="row">
   <div>Item 6</div>
   <div>Item 7</div>
   <div>Item 8</div>
   <div>Item 9</div>
   <div>Item 10</div>
</div>

在vue.js中表达这个的正确方法是什么？

 <div class="row">
    <span  v-for="(item, index) in items">
         // do something like this in vue.js style: 
         // if (item % 5 == 0) print "</div><div class='row'>"
         <app-field >{{ item }}</app-field>
    </span>
</div>

Answer 1

你可以试试这个：

tierRates

参见一个工作示例：

＆＃13;

public double getRateForTier(int tier) {
  return tierRates.get(tier);
}

＆＃13;

  <div class="row" v-for="i in Math.ceil(items.length / 5)">
    <span v-for="item in items.slice((i - 1) * 5, i * 5)">
      {{item}}
    </span>
  </div>

＆＃13;

new Vue({
  el: '#demo',
  data: {
    items: [
      'item 1',
      'item 2',
      'item 3',
      'item 4',
      'item 5',
      'item 6',
      'item 7',
      'item 8',
      'item 9',
      'item 10',
      'item 11',
      'item 12',
      'item 13',
      'item 14',
      'item 15',
      'item 16',
      'item 17',
      'item 18',
      'item 19',
      'item 20',
      'item 21',
      'item 22',
      'item 23',
      'item 24',
      'item 25'
    ]
  }
})

＆＃13;

Answer 2

除了我认为很好的上面的例子，我会将计算定义为计算属性和方法，以获得更易读的代码。请参阅JSFiddle：

 computed:{
    rowCount() {     
       return Math.ceil(this.items.length / this.itemsPerRow);
 },

Answer 3

或者你也可以使用lodash _.chunk()来做同样的事情，我个人觉得它更具可读性。

模板：

<div class="columns" v-for="chunk in productChunks">

    <div class="column is-one-quarter" v-for="product in chunk">
       // stuff
    </div>

</div>

然后

    computed: {
      productChunks(){
          return _.chunk(Object.values(this.products), 4);
      }
    },

我个人在全球范围内导入lodash，因为我经常在main.js中使用它：

import _ from 'lodash'

请记住'npm install --save lodash'

Answer 4

使用npm install --save lodash，答案有所改善。

<template>
<div class="content">
    <div class="row" v-for="chunk in productChunks">
        <product-thumbnail :product="sp" v-for="sp in chunk" class="col-4"></product-thumbnail>
    </div>
</div>
</template>



import lodash from 'lodash';


export default {
    name: "ProductList",
    components: {
        "product-thumbnail": ProductThumbnail
    },
    data() {
        return {
            sps: [],
            itemsPerRow: 4
        }
    },
    async mounted() {
        let resp = await;
        //call api
        this.sps = results;
    },
    computed: {
        productChunks() {
            return lodash.chunk(Object.values(this.sps), this.itemsPerRow);
        }
    }
}

Answer 5

如果您只是为以后可能使用position: relative呈现的内容创建占位符/插槽，则可以这样创建它们：

<template>
    <div class="col q-gutter-y-xs">
        <div class="row q-gutter-x-xs" v-for="row in rows" :key="row">
          <div class="col slot text-white" v-for="col in columns" :key="col">

          </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                rows: 7,
                columns: 7
            }
        }
    }
</script>

<style>
    .slot {
        background: #444;
        border-radius: 8px;
        border: 1px #2e2d28 solid;
    }
</style>

vuejs v-for每5个项添加一个bootstrap行

5 个答案: