VUE3中<div v-for="item in list"><div class="a">{{item}}</div></div>如何让每个a中字体颜色不同
时间: 2024-01-06 16:03:04 浏览: 47
深入理解vue中slot与slot-scope的具体使用
您可以使用动态绑定样式的方式,将每个 div 的文字颜色绑定为不同的值。例如:
<div v-for="(item, index) in list">
<div :style="{color: colors[index % colors.length]}">{{ item }}</div>
</div>
其中,colors 是一个数组,包含了所有可能的文字颜色。通过计算每个 div 的索引值与 colors 数组长度的余数,来循环使用 colors 数组中的颜色值,从而实现每个 a 中字体颜色不同的效果。
阅读全文