javascript - 有没有办法执行一个函数或将一个动态类分配给一对两个组件，从数组的迭代中跳过每两个组件？

Question

我有一个组件，我正在调用它并在父级中使用一组项目进行迭代。但是在每两个组件之后，box-shadow 是不同的。如何为每对两个组件提供相同的框阴影，而接下来的两个组件则不同？我希望你能理解我的问题。

最初，我想我会通过 id 或索引跟踪它，对于索引为 0 和 1 的任何项目，我会给出一个特定的框阴影，然后下一对 2、3 会有一个不同的, 然后 4 和 5 也是不同的;那个序列。但我在实现时遇到了一些问题。

这是 parent

       <v-layout row wrap class="mt-3">
            <v-flex 
                xs12 v-for="(item,i) in plans"
                :key="i"
                >
                <plan-item :item="item" />
            </v-flex>
        </v-layout>

这是正在迭代的数据(计划)

computed: {
        plans(){
            return this.$store.state.healthPlans
        }
    }

这是计划项子组件

<div>
  <div :class="{'boxShadow1': isPairOne, 'boxShadow2': isPairTwo}"></div>
</div>

//It has the item prop
props: {
        item: {
            type: Object
        },
       }

计划是，对于每对两个，它们将拥有 boxShadow1 类，而 boxShadow2 将用于接下来的两个，无论数组中的项目数量如何，循环都会重复。

Answer 1

有多种方法可以对索引进行配对。你可以使用 i % 4 < 2 . i % 4部分将产生序列 0, 1, 2, 3, 0, 1, 2, 3, ... 并且一对将是 0 和 1，而另一对将是 2 和 3。

或者，如果您更喜欢按位运算符，则可以使用 i & 2 , 这将产生序列 0, 0, 2, 2, 0, 0, 2, 2, ...

具体应用阴影的位置由您决定。例如

<plan-item
  :item="item"
  :class="i % 4 < 2 ? 'boxShadow1' : 'boxShadow2'"
/>

<plan-item
  :item="item"
  :class="i & 2 ? 'boxShadow2' : 'boxShadow1'"
/>

您可以使用合适的 Prop 将其转移到 child 体内。