使用 vue 模板引导行类每个第三个元素

Bootstrap row class each third element with vue template

本文关键字：元素 三个 vue 使用      更新时间：2023-09-26
<template id="players-template">
<div class="col-md-4" v-for="player in players">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                <a href="#">{{ player.username }}</a>
                <span class="small pull-right">{{ player.createdAt }}</span>
            </h3>
        </div>
        <div class="panel-body">
            <img alt="" class="img-circle center-block">
        </div>
        <div class="panel-footer">
            <div class="btn-group btn-group-justified" role="group" aria-label="...">
                <a href="#" class="btn btn-primary btn-success send-message" data-toggle="tooltip" data-placement="bottom" title="Wyślij wiadomość" id="{{ player.username }}"><span class="glyphicon glyphicon-envelope"></span>&nbsp;</a>
                <a href="#" class="btn btn-primary btn-info" data-toggle="tooltip" data-placement="bottom" title="Pokaż profil"><span class="glyphicon glyphicon-user"></span>&nbsp;</a>
                <a href="#" class="btn btn-primary btn-primary" data-toggle="tooltip" data-placement="bottom" title="Zobacz szczegółowe informacje o poście"><span class="glyphicon glyphicon-option-horizontal"></span>&nbsp;</a>
            </div>
        </div>
    </div>
</div>

我创建了模板以在我的网站上显示玩家。我不知道如何每隔三个面板添加新<div class="row">。

这里有一个简化的例子可能会有所帮助。

这使用自定义过滤器将玩家"分块"成 3 组。外部循环遍历每个块并创建行，内部循环遍历每个玩家并创建列。

目录 

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

爪哇语

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"}
        ]
    }
})

全提琴

相关文章：