Vue template conditional rener
<
-
<div id="app" class="container">
<div v-for="player in players">
<div class="row" v-if="($index + 1) % 3 == 0 ">
{{$index + 1}}
</div>
</div>
</div>
$index is a special variable inside v-for
http://vuejs.org/guide/list.html#v-for
讨论(0)
-
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> </a>
<a href="#" class="btn btn-primary btn-info" data-toggle="tooltip" data-placement="bottom" title="Pokaż profil"><span class="glyphicon glyphicon-user"></span> </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> </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.
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
讨论(0)
加载中...
- 热议问题