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

Posted 2023-02-23

【中文标题】使用 Vue.js + Vuetify 有条件地绑定类？

【英文标题】：Conditionally bind class with 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 实例的“已安装”生命周期中才能使其正常工作？

感谢您的帮助！

【问题讨论】：

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

【参考方案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 sourceVue conditional attributes

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

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