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?