How to use vUE to dynamically bind class methods?

The first is to determine whether a style class is valid by a Boolean value

//isActive is a Boolean value in data, and rotateRight is a class style class. //isActive is true

<div :class="{rotateRight:isActive}">aaa</div>
Copy the code

Second: determine which style class to use using the ternary operator

//isActive is the Boolean value in data rotateRight is the class style class. //isActive is true and right2 is false

<div :class="[isActive ? 'right' : 'right2']">abs</div>
Copy the code

Fixed styles and dynamic binding exist together

ErrorClass is always present, add activeClass when isActive is true:

<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
Copy the code