javascript - 在 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直接根据value修改xs12,md6,xl4的情况下基于value或者props给出条件吗我得到了”

例如如下所示，因为对于内部组件 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>