javascript - Bootstrap 行类每个第三个元素与 vue 模板

Question

<分区>

Answer 1

这是一个可能有用的简化示例。

这使用自定义过滤器将玩家“分块”为 3 人一组。外循环遍历每个 block 并创建行，内循环遍历每个玩家并创建列。

HTML

<div id="app" class="container">
  <div v-for="row in players | chunk 3" class="row">
    <div v-for="player in row" class="col-sm-4">
      {{ player.name }}
    </div>
  </div>
</div>

Javascript

Vue.filter('chunk', function (value, size) {
  return _.chunk(value, size); // using lodash
})

new Vue({
    el: '#app',
    data: {
        message: 'Players',
        players: [
          { name : "Player 1"},
          { name : "Player 2"},
          { name : "Player 3"},
          { name : "Player 4"},
          { name : "Player 5"},
          { name : "Player 6"},
          { name : "Player 7"},
          { name : "Player 8"}
        ]
    }
})

Full Fiddle