关于v-if控制元素隐藏显示混乱的问题

先看我的原始代码 （uniapp APP-NVUE）

principalaxis 返回true  和 flase
<div class="demo" v-if="principalaxis ">
	<div class="speed-btn" :class="{speedcoloe:!principalaxis}"><text class="iconfont">&#xe628;</text></div>
	<div class="speed-btn" :class="{speedcoloe:!principalaxis}"><text class="iconfont">&#xe62b;</text></div>
</<div>
<div class="demo" v-else>
	<div class="speed-btn" :class="{speedcoloe:!principalaxis}"><text class="iconfont">&#xe628;</text></div>
	<div class="speed-btn" :class="{speedcoloe:!principalaxis}"><text class="iconfont">&#xe62b;</text></div>
</<div>

.speed-btn{
	width:45rpx;
	height:29rpx;
	border-radius:13rpx;
	background-color:#ffffff;
	margin-left:9rpx;
	transition-property:background-color;
	transition-duration:0.1s;
	.iconfont{
		font-size:12rpx;
		text-align: center;
		color:#626363;
		line-height:29rpx;
	}
}
	
.speedcoloe{
	@extend .speed-btn;
	background-color:#BBBBBB !important;
}

.speed-btn:active{
		background-color:#BBBBBB;
}

大概就是这样，现在遇到的问题就是
1，切换两个div的时候颜色并没有改变
2，我切换到speedcoloe css的情况时触发到 active 会导致我的颜色改变后无法还原。

思路：首先我的可以看到div是确实又切换的 所以不会是 v-if 的问题
首先排查 css 看到了其实有一句是有错误的 transition-property:background-color; 修改为 transition-property:backgroundcolor; （不要中间的连接号）

修改后 依旧存在问题2：切换到speedcoloe css的情况时触发到 active 会导致我的颜色改变后无法还原。

改变思路 不通过 :active 去改变背景颜色 而是在里面多加一个遮罩 控制这个遮罩的 透明度来显示选中的样式

看代码：

<div class="speed-btn" :class="{speedcoloe:!principalaxis}"><div class="speed-on" v-if="principalaxis"></div><text class="iconfont">&#xe628;</text></div>
<div class="speed-btn" :class="{speedcoloe:!principalaxis}"><div class="speed-on" v-if="principalaxis"></div><text class="iconfont">&#xe62b;</text></div>

.speed-btn{
	width:45rpx;
	height:29rpx;
	border-radius:13rpx;
	background-color:#ffffff;
	margin-left:9rpx;
	position:relative;
	.iconfont{
		font-size:12rpx;
		text-align: center;
		color:#626363;
		line-height:29rpx;
	}
}
.speed-on{
	position:absolute;
	width:45rpx;
	height:29rpx;
	background-color:#BBBBBB;
	border-radius:13rpx;
	opacity:0;
}
.speed-on:active{
	opacity:1;
}
.speedcoloe{
	background-color:#BBBBBB !important;
}