核心代码Math.floor(index / 4) % 2
,4可以换成其他数值代表行数。
<template>
<div>
<div
v-for="(item, index) in list"
:key="index"
:style="{backgroundColor: getBackgroundColor(Math.floor(index / 4) % 2)}"
>
1
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: Array.from({length: 12}, (_, index) => index + 1) // 假设你有12个元素
};
},
methods: {
getBackgroundColor(index) {
const colors = ['lightblue', 'lightcoral']; // 你想要的两种颜色
return colors[index];
}
}
};
</script>
隔行换色:<div v-for="(each, index) in detailInfo" :key="index" :class="index % 2 ? '' : 'strip-row'">