Vue中不使用v-if如何动态设置Vuetify v-flex的栅格属性

完全可以不使用v-if实现栅格属性动态切换，不需要维护多套重复模板代码，核心是利用Vue的动态属性绑定特性+Vuetify栅格prop的布尔值特性实现。

实现原理 #

Vuetify中v-flex上的xs12/md6/xl4这类栅格配置本质是组件接收的布尔类型props：在标签上直接写属性名等价于给该prop传true，不写则等价于传false。配合Vue的无参数v-bind语法（可以直接绑定一个包含多组键值对的对象，批量给组件传prop），就能实现单模板下的栅格属性动态切换。

推荐实现（可维护性最高） #

通过计算属性统一维护不同totalMenuShowed值对应的栅格配置，模板只需要绑定一次计算属性即可，后续新增场景只需要修改计算属性逻辑：

<template>
  <v-flex v-bind="flexGridProps">
    <div>
      <!-- 业务组件内容 -->
    </div>
  </v-flex>
</template>

<script>
export default {
  props: {
    totalMenuShowed: {
      type: Number,
      default: 4,
    },
  },
  computed: {
    flexGridProps() {
      // 提取所有场景通用的栅格配置
      const baseConfig = { xs12: true }
      switch(this.totalMenuShowed) {
        case 4:
          return { ...baseConfig, md6: true, xl6: true }
        case 3:
          return { ...baseConfig, md6: true, xl4: true }
        default:
          return { ...baseConfig, md12: true, xl12: true }
      }
    }
  }
}
</script>

轻量场景实现 #

如果判断逻辑非常简单，也可以直接给单个栅格prop绑定动态布尔值，不需要额外写计算属性：

<template>
  <v-flex
    xs12
    :md6="totalMenuShowed === 3 || totalMenuShowed === 4"
    :md12="totalMenuShowed < 3"
    :xl6="totalMenuShowed === 4"
    :xl4="totalMenuShowed === 3"
    :xl12="totalMenuShowed < 3"
  >
    <div>
      <!-- 业务组件内容 -->
    </div>
  </v-flex>
</template>

注意：你在期望示例里写的直接在标签属性位写三元表达式拼接多个属性名的写法不符合Vue模板语法规范，无法被编译器识别，必须通过v-bind绑定对象的方式实现多属性动态传递。

内容的提问来源于stack exchange，提问作者Rakis Friski