将多个类绑定到单个变量

Question

在使用 Tailwind 和实用程序优先的 css 方法时，我经常发现需要将多个类绑定到单个变量。

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

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

Answer 1

您可以将这两个类组合到同一个属性中：

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