vue变量 控制 标签包含 不同的class，并实现图标闪烁

* 变量控制class类名：

 : class=" 变量? ' 类名1 类名2 ' : ' 类名1 ' "

* 实现图标闪烁

data先定义变量haveErrorData:true

<div class="floatBtn">
    <div :class="haveErrorData?'errorIcon change':'errorIcon'" style="width: 50px;height: 50px;margin-top: 15px"></div>
    <div style="text-align: center">{{haveErrorData?'异常':'无异常'}}</div>
</div>

这里的样式用的scss嵌套写法，普通css写法只需要把嵌套部分拿出来就行了（&符号要转成上一层类名，例如下方的 &:hover 需要转成 .floatBtn:hover ）

.floatBtn{
            position: absolute;
            top: 60px;
            right: 300px;
            z-index: 99;
            width: 100px;
            height: 100px;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            &:hover{
                cursor: pointer;
            }
            .errorIcon{
                background: url("../../../assets/cbhs/errorGray.png") no-repeat;
                background-size: 100% 100%;
                &.change{
                    animation: scaleout 1s infinite ease-in-out;
                }
                @keyframes scaleout {
                    0% {
                        background: url("../../../assets/cbhs/errorGray.png") no-repeat;
                        background-size: 100% 100%;
                    } 100% {
                          background: url("../../../assets/cbhs/errorRed.png") no-repeat;
                          background-size: 100% 100%;
                      }
                }
            }
}

最终效果：