Vue条件类绑定

Question

我正在尝试基于actionTypeCreate动态呈现类。这是一个简单地基于传递的propactionType返回布尔值的方法。我在安装的挂钩上触发了这个方法，并确认它正在正常返回。

现在，我正在尝试返回actionTypeCreate的类值"col-md-4"。如果不是actionTypeCreate，我想返回类"col-md-6"。

这就是我所拥有的，但它不起作用：

:class="{toggleActionType : 'col-md-4' ? 'col-md-6'}"

我试图参考这个现有的问题，但我没有得到它

Answer 1

您可以按如下方式执行：

:class="{'col-md-4' : toggleActionType , 'col-md-6' : !toggleActionType }"

Answer 2

根据Vue文档本身，您可以通过两种方式来实现。首先，您可以使用数组语法，这是广泛用于应用类列表。

数组语法

:class="[toggleActionType ? 'col-md-4' : 'col-md-6']"

或者你可以通过Object Syntax正常操作，但它不接受三元运算，所以你必须这样做：

对象语法

:class="{'col-md-4' : toggleActionType , 'col-md-6' : !toggleActionType}"

Answer 3

试试这个：

:class="[toggleActionType : 'col-md-4' ? 'col-md-6']"