Vue.js中v-for后如何使用first:child和last:child？

Question

我在使用 Vue.js.

中的 first-child and last-child 操作 v-for 上的网格时遇到问题

代码：

<div id="grid">
<NewsCard class="elements" v-for="perNews in news" :key="perNews.id" :news="perNews"></NewsCard>
</div>

CSS:

#grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap : 1rem;
}
#grid .elements > *:first-child,
#grid .elements > *:last-child {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 1rem;
        grid-column: 1 / span 2;
        align-items: center;
}

Answer 1

使用以下代码更新您的样式

#grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap : 1rem;
}
#grid .elements:first-of-type,
#grid .elements:last-of-type{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;
    grid-column: 1 / span 2;
    align-items: center;
}

尽情享受吧！