使用 Vue.js + Vuetify 有条件地绑定类？答案

【问题标题】：Conditionally bind class with Vue.js + Vuetify?使用 Vue.js + Vuetify 有条件地绑定类？
【发布时间】：2018-04-23 01:42:40
【问题描述】：

我正在尝试根据当前屏幕的尺寸有条件地将“xs10”类应用于包含我的菜单的 v-flex。到目前为止，我有这样的东西：

<v-flex v-bind:class="{ xs10: menuSmall}" fluid>

..data() {
 return {
  menuSmall: this.$vuetify.breakpoint.mdAndUp
 }
}

但它不起作用。我是 Vue.js + Vuetify 的新手，但我猜这是因为 menuSmall 不会在每次调整屏幕大小时重新计算和重新渲染。我是否需要将其放入我的 Vue 实例的“已安装”生命周期中才能使其正常工作？

感谢您的帮助！

【问题讨论】：

您可以在以下位置找到您的答案：stackoverflow.com/questions/48137224/…

标签： vue.js vuejs2 vue-component vue-router vuetify.js

【解决方案1】：

试试这个

<v-flex v-bind:class="flexClass" fluid>  // Could also be just :class="flexClass"

computed: {
  flexClass(){
    return {
      xs10: this.$vuetify.breakpoint.mdAndUp
    }
  }
}

【讨论】：

【解决方案2】：

仅查看文档，似乎 xs10 应该作为属性应用于 <v-flex>，而不是类。

Vuetify layout grid, example #1, view source
Vue conditional attributes

<v-flex :xs10="menuSmall" fluid>

..data() {
 return {
  menuSmall: this.$vuetify.breakpoint.mdAndUp
 }
}

【讨论】：