在 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

您应该能够使属性动态化。这是用 v-bind: 或简称 : 完成的。

true-ish 值将添加属性
false-ish 值将删除属性
string/number 将显示为它们的属性值

<v-flex xs12 :md6="totalMenuShowed>=3 && totalMenuShowed<=4" :md12="totalMenuShowed<3 || totalMenuShowed>4"
  :xl6="totalMenuShowed===4" :xl4="totalMenuShowed===3" :xl12="totalMenuShowed<3 || totalMenuShowed>4">
  <div>
   // some component
  </div>
 </v-flex>

为了使其更易于维护，您可以根据需要为这些条件创建 computed 值。

v-bind 文档：https://vuejs.org/api/built-in-directives.html#v-bind

Answer 2

我会使用 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>

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

Add condition in vue attribute instead using v-if condition

javascript

vue.js

vuetify.js

v-bind