在 vue 属性中添加条件，而不是使用 v-if 条件

Question

我对这个模糊的标题感到抱歉，因为我很困惑关于这个问题我应该在标题中写什么，

所以，我想使用vuetify网格进行组件布局。如果我想正常实现它，我确切地知道如何实现，如下所示：

<template>
 <v-flex v-if="totalMenuShowed=== 4" xs12 md6 xl6>
  <div>
   // some component
  </div>
 </v-flex>

 <v-flex v-else-if="totalMenuShowed=== 3" xs12 md6 xl4>
  <div>
   // some component
  </div>
 </v-flex>

 <v-flex v-else xs12 md12 xl12>
  <div>
   // some component
  </div>
 </v-flex>
</template>

<script>
  props: {
    totalMenuShowed: {
      type: Number,
      default: 4,
    },
  },
</script>

但我想知道的是

“我可以根据我拥有的值或道具给出一个条件，而不使用并根据我获得的值v-if直接修改xs12, md6, xl4”

例如如下所示，因为对于内部组件，class我可以根据需要更改它@media screen，但我无法更改网格，因为我将它用于下面的另一个组件，并且我不喜欢自己更改网格值：

<template>
 <v-flex {totalMenuShowed === 4 ? xs12 md6 xl6 : totalMenuShowed=== 3 ? xs12 md6 xl4 : xs12 md12 xl12}>
  <div>
   // some component
  </div>
 </v-flex>
</template>

有人可以帮我解决这个问题吗？我想知道在vue中是否真的可以实现这一点？

Answer 1

我会利用v-bind并使用计算的，如下所示：

<template>
  <v-flex v-bind="vFlexProps">
    <div></div>
  </v-flex>
</template>

<script>
export default {
  props: {
    totalMenuShowed: {
      type: Number,
      default: 4,
    },
  },
  computed: {
    vFlexProps() {
      return {
        xs12: true,
        md6: this.totalMenuShowed < 3 || this.totalMenuShowed > 4,
        ...
      };
    },
  },
};
</script>