vue.js - 将多个类绑定(bind)到单个变量

Question

在将 Tailwind 与实用程序优先方法一起用于 css 时，我经常发现需要将多个类绑定(bind)到单个变量。

例如，要为输入表单设置样式，如果出现错误，我需要添加 border-red、color-red 等。

在 Vue 中是否有一种优雅的方式来表达这一点，而不是编写 v-bind:class="{ 'border-red': error, 'text-red': error }？

Answer 1

您可以将两个类合并到同一个属性中:

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