使用数据作为道具甚至是断点大小，对标签进行Vuetify，三元编码？

Question

我想要一个基于我的数据的三元组来在模板元素上设置属性。我正在使用Vuetify。

我知道我可以使用if / else来做到这一点，尽管我在努力避免使代码保持简洁。

<v-layout myProp ? justify-center : justify-space-around>
OR EVEN
<v-layout xl ? justify-center : justify-space-around>

有人知道是否有办法使这种语法或类似的东西起作用？

Answer 1

您可以通过使用:class将类绑定到元素来实现。 它支持三元表达式。参见Docs

使用道具：

<v-layout :class='[myProp ? "justify-center" : "justify-space-around"]'>
    ...
</v-layout>

验证断点大小：

<v-layout :class='[this.$vuetify.breakpoint.xs ? "justify-center" : "justify-space-around"]'>
   ...
</v-layout>

Example

Answer 2

对于非prop属性，其最终结果是：

<v-flex xs8 :lg3="$store.state.tableLoadComplete">