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

我在 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/ https://jsfiddle.net/kunjsharma/o0kL7myt/

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

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

:class="[position, direction]"

So if position is 'right' and direction is 'rtl'那么该元素将具有类right and rtl应用于它。

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

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

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

If pressedElement === el为 true 那么该元素将得到pressed应用于它的类，同样适用于active（我只是随意编造了一些表达方式）。