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

Vue.js 专栏收录该内容
12 篇文章 0 订阅

背景

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

结尾

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

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值