javascript - Vue 模板条件渲染

Question

<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，然后追加新行。如何使用 if 条件？

Answer 1

<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是v-for内部的一个特殊变量

http://vuejs.org/guide/list.html#v-for