Question

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

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

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

但它不起作用。我是Vue.js + Vuetify的新手，但我猜它是因为menuSmall没有被重新计算并在每个屏幕上重新渲染调整大小。我是否需要将其置于我的Vue实例的“已安装”生命周期中才能使其正常工作？

感谢您的帮助！

Answer 1

试一试

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

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

Answer 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
 }
}

有条件地将类绑定到Vue.js + Vuetify？

2 个答案: