使用Vue.js+有条件地绑定类；武装分子？

我试图根据当前屏幕的尺寸，有条件地将类“xs10”应用于包含我的菜单的v-flex。到目前为止，我得到了这样的结果：

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

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

…数据（）{
返回{
menuSmall:此.$vuetify.breakpoint.mdAndUp
}
}

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

---

谢谢你的帮助

只需查看文档，xs10似乎应该作为属性而不是类应用于

…数据（）{
返回{
menuSmall:此.$vuetify.breakpoint.mdAndUp
}
}

查看文档，xs10似乎应该作为属性而不是类应用于

…数据（）{
返回{
menuSmall:此.$vuetify.breakpoint.mdAndUp
}
}

试试看

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

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

//也可以是：class=“flexClass”
计算：{
flexClass（）{
返回{
xs10:this.$vuetify.breakpoint.mdAndUp
}
}
}

试试看

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

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

//也可以是：class=“flexClass”
计算：{
flexClass（）{
返回{
xs10:this.$vuetify.breakpoint.mdAndUp
}
}
}

您将在以下位置找到您的anwser: