背景
写项目时,每个人的都需要有自己的技能标签,需要将技能标签的背景颜色每一次查看时都不相同,此时我们使用随机数范围未0~255,从而拼接rgb值,并将其设置到标签的背景颜色中。
代码部分
话不多说直接上代码~
<ul class="lable_list">
//添加style为item.color为随机生成的颜色
<li
class="lable_item"
v-for="(item,index) in skillTagArr"
:style="{background:item.color}"
><i class="el-icon-share"></i>{{item.tag}}</li>
</ul>
<script>
import { mapState } from 'vuex'
export default {
data() {
return {
skillTagArr: [],
}
},
mounted() {
this.initTarget()
},
methods: {
changeNav(index) {
this.navListColor = index
},
initTarget() {
//将vuex仓库中的数据赋值给数组
this.skillTagArr = this.personalInfo.tags
this.skillTagArr.forEach((item) => {
//向数组中的对象添加color属性值,并调用随机生成函数
item.color = this.RandomColor()
})
},
RandomColor() {
let r, g, b
r = Math.floor(Math.random() * 256)
g = Math.floor(Math.random() * 256)
b = Math.floor(Math.random() * 256)
return 'rgb(' + r + ',' + g + ',' + b + ')'
},
},
computed: {
//获取vuex中个人中心的数据
...mapState(['personalInfo']),
},
}
</script>
结尾
问题解决,有帮助的话就点个赞在走吧~