一、解决方案
1. 创建随机生成颜色的函数
// 创建随机生成颜色的函数
makeColor() {
let arr = [6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'];
let color = "#";
for (let i = 0; i < 3; i++) {
color += arr[Math.floor(Math.random() * 10)];
}
return color;
},2.为页面所要使用的数据添加上述函数的结果也就是color属性
// 将color属通过forEach循环添加进后台数据中
init() {
this.hot.forEach((item) => {
item.color = this.makeColor();
})
}3.在create钩子函数中调用 init 函数，随后渲染页面即可
created() {
this.init()
},4.页面渲染方式
<view class="color-tag" v-for="(item,index) in hot" :key="index">
<button size="mini" :style="{background: item.color, opacity: 0.7}"
@click="searchKeyword = item.name">{
{item.name}}</button>
</view>总结
今天解决了一个问题，也学到了一个新的方法，分享给你。