给每一个循环的块状盒子添加不同的颜色用vue
时间: 2024-04-29 08:21:07 浏览: 21
可以使用vue的v-bind指令和计算属性来实现给每一个循环的块状盒子添加不同的颜色。
首先,在vue组件中定义一个数组来存储不同的颜色值:
```
data() {
return {
colors: ['#FFC0CB', '#FFFF00', '#00FF00', '#00FFFF', '#0000FF']
}
}
```
然后,在模板中使用v-for指令来循环展示块状盒子,并使用v-bind指令将计算属性color与每个盒子的style属性绑定:
```
<template>
<div>
<div v-for="(item, index) in items" :key="index" :style="{ backgroundColor: color(index) }">
{{ item }}
</div>
</div>
</template>
```
最后,在vue组件中定义一个计算属性color来根据盒子的索引值返回对应的颜色值:
```
computed: {
color() {
return (index) => {
return this.colors[index % this.colors.length]
}
}
}
```
这里使用了箭头函数来定义color计算属性,它接收一个索引值,并返回对应的颜色值。使用取余运算符来实现循环使用颜色数组中的颜色。
完整的vue组件代码如下:
```
<template>
<div>
<div v-for="(item, index) in items" :key="index" :style="{ backgroundColor: color(index) }">
{{ item }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: ['item1', 'item2', 'item3', 'item4', 'item5'],
colors: ['#FFC0CB', '#FFFF00', '#00FF00', '#00FFFF', '#0000FF']
}
},
computed: {
color() {
return (index) => {
return this.colors[index % this.colors.length]
}
}
}
}
</script>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)