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

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63