希望这种的,颜色随机字体的字号随机,并且间隔的距离也是随机的。
首先写个获取随机颜色的函数
randomRgbaColor() { //随机生成RGB颜色
var r = Math.floor(Math.random() * 256); //随机生成256以内r值
var g = Math.floor(Math.random() * 256); //随机生成256以内g值
var b = Math.floor(Math.random() * 256); //随机生成256以内b值
return `rgb(${r},${g},${b})`; //返回rgba(r,g,b,a)格式颜色
},
字体希望是二位数的随机的。Math.floor(Math.random()*10)+10
间隔的距离也是参照上面两位的随机数写Math.floor(Math.random()*10)+20
最后的效果是
<h5 >
<span v-for="(item,key1) in advwordbar" :key='key1'
:style="{'color':randomRgbaColor(),'font-size':Math.floor(Math.random()*10)+10+'px','padding-left':Math.floor(Math.random()*10)+20+'px'}">{{item}}</span>
</h5>