点击按钮改变按钮的颜色,并且页面会根据值,显示对应的颜色(类似开关按钮:开为绿色,关为红色)_按钮样式 off显示红色 on显示绿色

根据后端数据设置按钮的颜色, 并且点击按钮改变按钮的颜色(以button为开关按钮为例)
首先说明 button 按钮的值是后端数据

<!-- 
	1、item.devicePower是按钮的值[如果是表格的话则按钮的值是(scope.row.对应的值)]
	2、这里我的button值是两个值
	3、按钮的值
		开:on,背景色为green
		关:off,背景色为red
			字体色或者图标色为white
-->
<el-button :style="{background:[item.devicePower === 'on' ? 'green' : 'red'],color: fontColor='white'}" 
	icon="el-icon-switch-button" size="mini" 
	@click="devicePowerBtn(item) circle">开关</el-button>

<script>
export default {
	data() {
		return {
			//开关按钮初始化
        	devicePowerVal: 0
		}
	},
	methods: {
		//开关按钮的方法
		//说明:在页面刷新的时候button就已经有值了,所以先判断值,再去加点击的次数,1为开的次数,2位关的次数
		devicePowerBtn(row) {
			if (row.devicePower == 'on') {
				this.devicePowerVal = 1
				this.devicePowerVal++;
				if (this.devicePowerVal === 2) {
					row.devicePower = "off";
					//设置参数,id 和 开关的值;  (根据id修改开关的值)
					let params = {id: row.id, devicePower: row.devicePower};
					//修改按钮的接口,修改数据库,这个方法自己写
					this.changeSet(params);
					this.devicePowerVal = 0;
				}
			} else if (row.devicePower == 'off') {
				this.devicePowerVal = 0
				this.devicePowerVal++;
				if (this.devicePowerVal === 1) {
					row.devicePower = "on";
					//设置参数,id 和 开关的值
					let params = {id: row.id, devicePower: row.devicePower};
					//修改按钮的接口,修改数据库,这个方法自己写
					this.changeSet(params);
					this.devicePowerVal = 1;
				}
			}
		}
	}
}
</script>

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

结果:(在点击按钮的时候,会在两色之间切换)