使用vue随机生成颜色数组，并设置盒子颜色

背景

 写项目时，每个人的都需要有自己的技能标签，需要将技能标签的背景颜色每一次查看时都不相同，此时我们使用随机数范围未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>

结尾

 问题解决，有帮助的话就点个赞在走吧~