同一个dom元素绑定的两个class优先级遵守,注意是根据类定义的先后顺序确定优先级,而不是根据类使用的先后顺序来确定优先级,后定义的覆盖先定义的。vue中给dom动态绑定的class类遵循同样的规则。
比如:
<style>
.box1 {
with: 100px;
heigth: 100px;
background-color: pink;
}
.box2 {
with: 100px;
heigth: 100px;
background-color: blue;
}
</style>
<div class="box1" v-bind:class="{box2: isActive}"></div>
<div class="box2" v-bind:class="{box1: isActive}"></div>
export default {
data(){
return {
isActive: true
}
},
}
在vue环境下运行后你会发现两个盒子的颜色都是blue,因为blue是后定义。
总之,一句话,同一个dom元素绑定的两个class优先级问题跟定义顺序有关,跟使用顺序无关。
补充:当v-bind:style绑定样式时,等同于内联样式,优先级最高。