在 Vue 中应用多个条件类

Question

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

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

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

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

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

这是小提琴：

Answer 1

您可以使用 2 种语法：

您也可以创建:class一个字符串，但是当您想对多个类使用条件时，这会很混乱。您还可以执行计算属性：

computed: {
  myClass: function() {
    return [position ? 'position' : '', direction ? 'direction' : ''].filter(c => !!c).join('');
  }
}

有关更多示例，请参阅Vue 中的条件类。

Answer 2

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

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

:class="[position, direction]"

因此，如果position是'right'和direction是，'rtl'则元素将具有类right并rtl应用于它。

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

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

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

如果pressedElement === el为真，则该元素将获得pressed应用到它的类，同样为active（我刚刚编写了一些任意表达式）。

Answer 3

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

{
    className: isEnabled,
    anotherName: isOtherEnabled,
}

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

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

如果你不是要设置的类名是位置和方向属性的值，那么你应该使用数组语法：[position, direction]。您还可以使用类语法来实现这一点，如下所示：{ [position]: true, [direction]: true }