微信小程序、uniapp、vue生成随机边框颜色十六进制

效果图

实现思路（只代表我项目需求，自己需求自行做更改）。
刚打开页面需要设置这个颜色，所以需要在onShow里面调用这个方法，自己写一个rgb颜色得数组，然后往这个你需要的数组里的每一项里动态添加一个枚举值。从列表中随便取一个颜色赋值。
主要用到的方法

Math.floor(Math.random() * colorArr.length)

<ul>
  <li v-for="item in getPetImagesData" :key="item.id" :style="{border: `1px solid ${item.color}`}">{{ item.imageName }}</li>
</ul>

 onShow() {
    this.getPetImages();
  },
// 这里用到了async  await 让code同步执行
async getPetImages() {
  let colorArr = ["#7FFFAA", "#ff7070", "#EEC900", "#4876FF", "#ff6100", "#FFA500",
    "#7DC67D", "#E17572", "#7898AA", "#C35CFF", "#33BCBA", "#C28F5C",
    "#FF8533", "#6E6E6E", "#428BCA", "#5cb85c", "#FF674F", "#E9967A",
    "#66CDAA", "#00CED1", "#9F79EE", "#CD3333", "#FFC125", "#32CD32",
    "#00BFFF", "#68A2D5", "#FF69B4", "#DB7093", "#CD3278", "#607B8B"
  ];
  const res = await this.$h.pos('petIm'); //  自己的接口我这是随便写的
// 最后执行赋值操作（随便写一个数组）这是没给的，也就是没赋值
/**
* 没给color枚举值的数组（假数据）
let getPetImagesData = [
	{
		id: 1,
		imagesname: 'hello world'
	}
]
*/
  // 一定要先给然后在赋值，赋值过后你的数组里的每一项都会有一个color的随机颜色
  res.data.forEach(item => {
    item.color = colorArr[Math.floor(Math.random() * colorArr.length)]
  });
  this.getPetImagesData = res.data;
   /**
   *这是赋值过后的
  let getPetImagesData = [
		{
			id: 1,
			imagesname: 'hello world',
			color: '#131232'
		}
	]
  */ 
},

ul {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: flex-start;
 text-align: center;
 li {
   border-radius: 20rpx;
   margin-right: 20rpx;
   padding: 10rpx;
   font-size: 20rpx;
   margin-bottom: 20rpx;
 }