在VueJS 2中使用v-for第二个参数突出显示index和index+1

根据一个VueJS2项目,我需要 “突出显示” 数组的第一个和第二个元素(它们必须比其他元素大),我使用 v-for 从父组件对子组件进行itering的语法。

经过一段时间的搜索,我发现你可以在v-for上调用第二个参数 v-for="(item, index)" of items 其中 index 和 index+1 应绑定为HTML类以修改第一个和第二个的呈现希望我足够清楚..如果需要的话可以问我..我写了下面的代码 它几乎可以工作,但我仍然有一个问题,因为我的卡实际上被重复了很多(3次) …有没有更优雅的方式来完成VueJS的工作?

父组件:

<template>
      <div>
      <child-card v-for="(item, index) of items" :item="item" :index="index">
      </child-card>
      </div>
 </template>
<script>

export default {
name: 'parent-video-list',
components: {
  ChildCard
},
props: {
  items: {
    type: Array,
    required: true
  }
 }
};
 </script>

子组件:

<template>
    <main>
      <a :href="item.link"></a>
      <img :src="item.image.url" alt="">
      <footer>
        <h2>{{ item.title }}</h2>
        <div class="author">{{ item.creator }}</div>
      </footer>
    </main>

  <main v-if="index">
    <a :href="item.link"></a>
    <img :src="item.image.url" alt="">
    <footer>
      <h2>{{ item.title }}</h2>
      <div class="author">{{ item.creator }}</div>
    </footer>
  </main>

  <main v-if="index + 1" class="highligths2">
    <a :href="item.link"></a>
    <img :src="item.image.url" alt="">
    <footer>
      <h2>{{ item.title }}</h2>
      <div class="author">{{ item.creator }}</div>
    </footer>
   </main>
  </template>

<script>
export default {
  name: 'childcard',

  props: {
    item: {
      type: Object,
      required: true
},
index: {
  type: Number
  // required: true
    }
  }
};
</script>

聚苯乙烯 :其中子块中的第二个块具有不同的css类