Question

根据VueJS 2项目，我需要“突出显示” 数组的第一个和第二个元素（它们必须比其他元素大），我正在使用{{1 }}的语法从父级迭代子级组件。

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

父组件：

index+1

子组件：

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

PS ：子级中的第二个块具有不同的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

1 个答案: