普通class命名方式：

<div class="className"></div>

动态命名class：
menu-item是类名，select是动态类名，再触发条件满足的情况下有效

下列中item index为传参 currentCheckObj.list是需要遍历的数组 select是需要触发的选择属性，'nav-item’是当前className， mouseover是鼠标移入的hover事件，click是点击事件
activeCounty和firstCheck就是定义的触发事件之后的方法

动态命名，命名方式采用方法定义

//动态命名
<div :class="['name',barType(index)]"></div>
//定义barType 方法
methods:{
barType(index){
const com = 'bar-type-'
if(index < 3){
	return `${com}1`
} else if (index >6){
	return `${com}3`
}else{
		return `${com}2`
}
}
}
//定义样式

    &.bar-type-1 {
        .percent-bar {
            &:before {
                background: #60C9FF;
            }

            .bg {
                &:after {
                    background-image: radial-gradient(#00FFEF, #0073FF, transparent);
                }
            }
        }
    }
       &.bar-type-2 {
        .percent-bar {
            &:before {
                background: #fff;
            }

            .bg {
                &:after {
                    background-image: radial-gradient(#fff, #ccc, transparent);
                }
            }
        }
    }