uniapp中如何给列表循环设置随机背景色
时间: 2023-07-31 16:05:50 浏览: 123
可以使用以下代码来为uniapp中的列表循环设置随机背景色:
```
<template>
<view>
<view v-for="(item, index) in list" :key="index" :style="{ backgroundColor: getRandomColor }">
{{ item }}
</view>
</view>
</template>
<script>
export default {
data() {
return {
list: ['item 1', 'item 2', 'item 3', 'item 4', 'item 5']
}
},
computed: {
getRandomColor() {
return '#' + Math.floor(Math.random() * 16777215).toString(16);
}
}
}
</script>
```
这段代码中使用了v-for指令循环渲染列表数据,并为每个元素设置了随机背景色。在computed计算属性中定义了一个getRandomColor函数,用于生成随机的十六进制颜色代码。在模板中,通过style绑定将该随机颜色代码动态地赋值给每个元素的背景色属性。
阅读全文