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

Question

根据一个 VueJS 2 项目，我需要 "highlight" 数组的第一个和第二个元素（它们必须比其他元素大），我正在使用 v-for 语法从 parent.

迭代 child 组件

搜索了一段时间后，我发现您可以在 v-for 上调用第二个参数，例如 v-for="(item, index)" of items，其中 index 和 index+1 应该绑定为HTML 类修改第一个和第二个的渲染。希望我足够清楚..如果需要请随时问我..我写了下面的代码它几乎可以工作但我仍然遇到问题因为我的卡实际上重复了很多次（3次）..有没有更优雅的方法来在 VueJS 中完成这项工作？

parent 分量：

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

child分量：

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

PS ：child 中的第二个块有不同 css 类

Answer 1

由于您只想为某些索引处的项目设置样式，我建议您查看：

https://vuejs.org/v2/guide/class-and-style.html

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

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

或使用计算属性的更清洁器，但我会把它留给您来实现。

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

Highlight index and index+1 using v-for second argument in VueJS 2

html

javascript

css

vuejs2

v-for