vue js v-for循环仅显示一次

【问题标题】：vue js v-for loop display item only oncevue js v-for循环仅显示一次
【发布时间】：2016-04-20 10:00:16
【问题描述】：

我希望在循环的 v-for div 之间显示一个箭头，但不是在最后一个。如何在 Vue JS 中实现这一点？理想情况下，我会打破循环并且根本不控制这个元素，但可能必须使用 css last 类型的解决方案。

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

【问题讨论】：

标签： css vue.js

【解决方案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;
}

【讨论】：