类绑定三元运算符

Question

我有一些相当繁琐的逻辑我想应用于元素类.

:class="{sportTypes.sports.indexOf(sport) > -1 ? 'is-primary' : 'is-outlined'}"

以上情况不起作用,而以下情况如下:

:class="{'is-outlined': sportTypes.sports.indexOf(sport) > -1}"

我收到以下错误

template syntax error - invalid expression:

任何想法第一部分有什么问题？

Answer 1

你有不必要的牙套.后一个表达式是一个对象,而第一个表达式只是一个返回字符串的三元表达式.

:class="sportTypes.sports.indexOf(sport) > -1 ? 'is-primary' : 'is-outlined'"

Answer 2

当您在 中应用类绑定时Vue，您只使用大括号进行对象样式分配，就像第二个语句中一样。对于单个绑定，您只需...

:class="sportTypes.sports.indexOf(sport) > -1 ? 'is-primary' : 'is-outlined'"

如果您想在同一个逻辑语句中应用多个绑定，则可以将它们括起来[]，{}并用逗号分隔。

Answer 3

作为此处文档中给出的语法，您可以使用以下数组语法来实现此目的：

:class="[sportTypes.sports.indexOf(sport) > -1 ? 'is-primary' : 'is-outlined']"