Vue模板条件rener [英] Vue template conditional rener

问题描述

<template id="players-template">
<div v-for="player in players" v-bind:class="{ 'row': $index == 0}">
    <div class="col-md-4">
        <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>

我想结束div每行第三个元素的行，然后追加新行。如果条件我如何使用？

I want to end the div with class of row each third element and then append new row. How can I use if conditions ?

推荐答案

我想我认为这个out

I think I figured this out

<template id="players-template">
<div class="row">
    <template v-for="player in players">
        <div class="col-md-4">
            <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>

        <template v-if="($index + 1) % 3 == 0 ">
        </div><div class="row">
        </template>
    </template>
</div>
</template>

诀窍是在循环之前打开一行，然后关闭它。但是，在每三个玩家之后，我们关闭该行并开启一个新行。这将导致每三个玩家一行。

The trick is opening a row before the loop, then closing it afterwards. But, after every third player, we close the row and open a new one. This will result in one row for every three players.

然而，在大多数情况下，这不是必需的 - bootstrap会知道将每组三个带到一个新行因为您使用了 col-md-4

In most cases however, this isn't necessary - bootstrap would know to bring each set of three to a new row because you used col-md-4

这篇关于Vue模板条件rener的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！