uni-app ——vue中实现按钮随机背景颜色的方法

一、解决方案

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>

总结

今天解决了一个问题，也学到了一个新的方法，分享给你。