Question

我希望在我的循环v-for div之间显示一个箭头，但不是在最后一个。我怎样才能在Vue JS中实现这一目标？理想情况下，我会让循环中断而根本不控制这个元素，但可能必须使用css最后的类型解决方案。

<div class="row">
    <div v-for="events in list.events" >
        <div class="medium-4 columns" >
            <div class="card">
                <img src="http://placehold.it/400x200"></br>
                @{{events.title}}
                @{{events.start}} - @{{events.end}}
            </div>
        </div>
        <div class="medium-1 columns arrow" >
            <i class="fa fa-arrow-circle-right" aria-hidden="true"></i>
        </div>
    </div>
</div>

Answer 1

您可以将$index值与数组的长度进行比较：v-if="$index != (list.events.length - 1)"

<div class="row">
    <div v-for="events in list.events" >
        <div class="medium-4 columns" >
            <div class="card">
                <img src="http://placehold.it/400x200"></br>
                @{{events.title}}
                @{{events.start}} - @{{events.end}}
            </div>
        </div>
        <div class="medium-1 columns arrow" v-if="$index != (list.events.length - 1)">
            <i class="fa fa-arrow-circle-right" aria-hidden="true"></i>
        </div>
    </div>
</div>

对于css解决方案，请查看:last-of-type伪类：

.arrow:last-of-type{
  display:none;
}

vue js v-for循环显示项只有一次

1 个答案: