Vue dynamically add class, and more than three conditions are used to make judgments

If status is 1, the style is redRoom

If status is 2, the style is greenRoom1

If status is other, the style is greenRoom2

:class="{'redRoom': Number() === 1, 'greenRoom1': Number() === 2, greenRoom2: Number() > 2}"

Supplementary knowledge:vue judges the display class based on the variable value

I won't say much nonsense, let's just read the code~

<div :class="['bottom-btn',{'face-btn':type=='face'}]">

</div>

In the above article, the above vue dynamically adds class. The three or more conditions are the entire content that the editor shares with you. I hope you can give you a reference and I hope you support me more.