Vue 条件类绑定答案

【问题标题】：Vue Conditional Class BindingVue 条件类绑定
【发布时间】：2020-04-30 21:17:00
【问题描述】：

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

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

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

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

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

【问题讨论】：

【解决方案1】：

你可以这样做：

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

【讨论】：

【解决方案2】：

根据Vue documentation 本身，您可以通过两种方式进行操作。首先，您可以使用 Array Syntax，这广泛用于应用类列表。

数组语法

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

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

对象语法

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

【讨论】：

【解决方案3】：

试试这个：

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

【讨论】：