类绑定三元运算符答案

【问题标题】：Class Binding ternary operator类绑定三元运算符
【发布时间】：2017-01-31 23:22:28
【问题描述】：

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

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

上面的不起作用，而下面的起作用：

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

我收到以下错误

template syntax error - invalid expression:

你知道第一部分有什么问题吗？

【问题讨论】：

【解决方案1】：

你有不必要的大括号。后一个表达式是一个对象，而第一个表达式只是一个返回字符串的三元表达式。

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

【讨论】：

如果我想改变最后一个类'progress-bar progress-bar-striped bg-secondary'如果条件为真改变bg-primary如果假保持bg-secondary？
@FreddySidauruk 这听起来值得提出自己的问题，因为通过 cmets 获取所有细节太难了

【解决方案2】：

按照文档here 中给出的语法，您可以使用以下数组语法来实现此目的：

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

【讨论】：

【解决方案3】：

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

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

如果您想在同一个逻辑语句中应用多个绑定，请将它们括在 [] 而不是 {} 中，并用逗号分隔。

【讨论】：