在 Vue.js 中应用多个条件类

Question

我以这种方式在 Vue 中使用样式绑定：

 v-bind:style="{'width': + width + 'px', 'left': + x + 'px', 'top': y + 'px'}"

当我需要绑定多个条件类时，我使用了以下语法，但它不起作用！

 v-bind:class="{(position)?position:'', (direction)?direction:''}"

还有其他方法可以应用多个类吗？单个类（没有 {}）有效。

这是小提琴：

https://jsfiddle.net/kunjsharma/o0kL7myt/

原文由 Kunj 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

模板中的类绑定表达式是无效的 JavaScript 语法。

你的意思是像这样绑定一个数组：

 :class="[position, direction]"

So if position is 'right' and direction is 'rtl' then the element will have the classes right and rtl 应用于它。

绑定对象通常在您具有要根据某些条件有条件地应用的静态类名时使用。查看您的代码，这似乎不是您想要做的。

例如，如果您想根据某些条件有条件地应用静态类 pressed 和 active ，您可以这样做：

 :class="{ pressed: pressedElement === el, active: !hidden }"

如果 pressedElement === el 为真，则该元素将获得应用于它的 pressed 类，同样适用于 active 一些任意表达式（是）。

原文由 Decade Moon 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

类定义的基于对象的语法是：

 {
    className: isEnabled,
    anotherName: isOtherEnabled,
}

其中键 ( className ) 是类的名称，值 ( isEnabled ) 是它是否启用。

因此，在您的情况下，您可能需要 { position: position, direction: direction } 。您甚至可以让 javascript 为您推断键名 { position, direction } 。

如果您想将类名设置为位置和方向属性的值，那么您应该改用数组语法： [position, direction] 。您还可以使用类语法实现此目的，如下所示： { [position]: true, [direction]: true }

原文由 James Coyle 发布，翻译遵循 CC BY-SA 4.0 许可协议