Vue 条件 Class 绑定
Vue Conditional Class Binding
我正在尝试根据 actionTypeCreate 动态呈现 class。这是一种基于传递的道具 actionType 的简单 returns 布尔值的方法。我在已安装的挂钩上触发此方法并确认它 returning 正确。
现在我正在尝试 return 'col-md-4' 的 class 值 if actionTypeCreate。如果不是actionTypeCreate 我要return class 'col-md-6'.
这是我拥有的，但它不起作用：
:class="{toggleActionType : 'col-md-4' ? 'col-md-6'}"
我试图引用 现有问题，但我没有理解。
试试这个：
:class="[toggleActionType : 'col-md-4' ? 'col-md-6']"
您可以按照以下方式进行：
:class="{'col-md-4' : toggleActionType , 'col-md-6' : !toggleActionType }"
根据 Vue documentation 本身，您可以通过两种方式进行。首先，您可以使用 数组语法 ，这 广泛用于应用 类.
的列表
数组语法
:class="[toggleActionType : 'col-md-4' ? 'col-md-6']"
或者你可以通过对象语法正常完成，但它不接受三元运算，所以你必须这样做：
对象语法
:class="{'col-md-4' : toggleActionType , 'col-md-6' : !toggleActionType}"
我正在尝试根据 actionTypeCreate 动态呈现 class。这是一种基于传递的道具 actionType 的简单 returns 布尔值的方法。我在已安装的挂钩上触发此方法并确认它 returning 正确。
现在我正在尝试 return 'col-md-4' 的 class 值 if actionTypeCreate。如果不是actionTypeCreate 我要return class 'col-md-6'.
这是我拥有的，但它不起作用：
:class="{toggleActionType : 'col-md-4' ? 'col-md-6'}"
我试图引用
试试这个：
:class="[toggleActionType : 'col-md-4' ? 'col-md-6']"
您可以按照以下方式进行：
:class="{'col-md-4' : toggleActionType , 'col-md-6' : !toggleActionType }"
根据 Vue documentation 本身，您可以通过两种方式进行。首先，您可以使用 数组语法 ，这 广泛用于应用 类.
的列表数组语法
:class="[toggleActionType : 'col-md-4' ? 'col-md-6']"
或者你可以通过对象语法正常完成，但它不接受三元运算，所以你必须这样做：
对象语法
:class="{'col-md-4' : toggleActionType , 'col-md-6' : !toggleActionType}"