Bind multiple classes to a single variable

问题

While using Tailwind with utility-first approach to css, I often find the need to bind multiple classes to a single variable.

For instance, to style an input form, I need to add border-red, color-red, etc if there is an error.

Is there a nice and elegant way to express this in Vue instead of writing v-bind:class="{ 'border-red': error, 'text-red': error }?

回答1:

You can combine both classes into the same property:

:class="{ 'border-red text-red': error }"

来源：https://stackoverflow.com/questions/60471976/bind-multiple-classes-to-a-single-variable