Javascript 突出显示索引和索引+；1在VueJS 2中使用v作为第二个参数2

根据VueJS 2项目，我需要突出显示数组的第一个和第二个元素（它们必须比其他元素大），我正在使用

v-for

语法从父元素对子组件进行迭代

搜索一段时间后，我发现您可以调用v-for上的第二个参数，例如

v-for=“（item，index）”of items

，其中

索引和
索引+1
应绑定为HTML类，以修改第一个和第二个的呈现。希望我足够清楚如果需要请随时问我。。我写了下面的代码它几乎可以正常工作，但我还是遇到了一个问题，因为我的卡实际上被重复了很多次。。有没有一种方法可以让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>


导出默认值{
名称：'父视频列表'，
组成部分：{
儿童卡
},
道具：{
项目：{
类型：数组，
必填项：true
}
}
};

子组件：

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


{{item.title}
{{item.creator}}
{{item.title}
{{item.creator}}
{{item.title}
{{item.creator}}
导出默认值{
姓名：'儿童卡'，
道具：{
项目：{
类型：对象，
必填项：true
},
索引：{
类型：编号
//必填项：true
}
}
};

PS：如果子窗口中的第二个块具有不同的css类
，因为您只想在某些索引中设置项目的样式，我建议您查看一下：


实现它可能看起来像这样：

<main v-bind:class="{ highlights1: index === 0, highlights2: index === 1 }">
    ...
</main>


...

或者使用计算属性进行清理，但我将把它留给您来实现。
确实需要
：key
吗？您是对的，您是对的，它可以写为以下内容
：index=“index”
我更新我的post@ChrisSatchell是的，我把它作为一个
道具注射进去了看，我更新了我的帖子：-）我在本地试用过，效果很好，没有错误什么都没有是的你是对的，但我正在寻找一种更简单的方法，如果可能的话你的代码看起来很棒，我正在尝试这个！使用此解决方案也只需要有一个
main
节点，而不是3个，这正是我要搜索的：-）很好！您的代码返回任何错误，但没有突出显示索引，您是否尝试了该代码？是的，它对我很有效。如果您仍然有问题，请创建一个小提琴与您的代码。