改变按钮颜色，并且不会影响其它按钮的颜色

<!-- vue文件-->
<template>
	<view>
		<view v-for="(item,index) in loadBtnList">
			<button :class="item.btnStyle" type="default" style="margin: 20px;" @click="changeStyle(index)">{{item.title}}</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadBtnList: [],
				idList: []
			}
		},
		mounted() {
			this.getBtnList()
			this.loadStyle()
		},
		methods: {
			changeStyle(index) {
				this.idList.push(this.loadBtnList[index].id)
				this.$set(this.loadBtnList,index,{...this.loadBtnList[index],showBtn: true})
				this.loadStyle()
			},
			getBtnList() {
				var a = [{id:1,name:'按钮1'},{id:2,name:'按钮2'},{id:3,name:'按钮3'},{id:4,name:'按钮4'}]
				this.loadBtnList = a
				this.loadBtnList.forEach(item=> {
					item.showBtn = false
					item.btnStyle = 'style1'
					item.title = '领取'
					
				})
			},
			loadStyle() {
				for(var i=0;i<this.loadBtnList.length; i++) {
					this.idList.forEach(item=> {
						if(item==this.loadBtnList[i].id) {
							this.$set(this.loadBtnList,i,{...this.loadBtnList[i],showBtn: true})
							if(this.loadBtnList[i].showBtn) {
								this.loadBtnList[i].btnStyle = 'style2'
								this.loadBtnList[i].title = '已领取'
							}
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.style1 {
		background: #00ff00;
	}
	.style2 {
		background: #ff0000;
	}
</style>