Add condition in vue attribute instead using v-if condition [duplicate]

Question

I'm sorry for the vague title since I'm confused what should I write in the title regarding this problem,

So, I want to make a component layout using vuetify grid. I know exactly how to make it if I want to achieved it normally such as this:

<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>

but what I want to know is

"Can I give a condition based on value or props that I have without using v-if and directly modifying xs12, md6, xl4 based on value that I got"

for example such as below, since for the inside component class I can change it as I want using @media screen but I can't change the grid since I used it for another component below and I prefer not to change the grid value myself:

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

Can someone help me regarding this? I want to know if it is really possible to achieved this in vue?

Answer 1

I would make use of the v-bind and use a computed, like this:

<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>