class - Vue 条件类绑定

Question

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

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

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

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

我试图引用这个现有的问题，但我没有得到它。

score 1 · Accepted Answer

1

你可以这样做：

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

于 2020-04-30T21:27:23.177 回答

score 0 · Accepted Answer

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

数组语法

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

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

对象语法

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

score 0 · Accepted Answer

0

尝试这个：

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

于 2020-04-30T21:20:05.813 回答

3 回答 3