使用 Vue.js + Vuetify 有条件地绑定类? [英] Conditionally bind class with Vue.js + Vuetify?

查看:33
本文介绍了使用 Vue.js + Vuetify 有条件地绑定类?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试根据当前屏幕的尺寸有条件地将xs10"类应用于包含我的菜单的 v-flex.到目前为止,我已经得到了这样的东西:

I'm trying to conditionally apply the class "xs10" to a v-flex which contains my menu, based on the dimensions of the current screen. I've so far got something like this:

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

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

但它不起作用.我是 Vue.js + Vuetify 的新手,但我猜这是因为 menuSmall 没有在每次屏幕调整大小时重新计算和重新呈现.我是否需要将它放入我的 Vue 实例的已安装"生命周期中才能使其正常工作?

But it's not working. I'm new to Vue.js + Vuetify but I'm guessing it's because menuSmall is not being re-calculated and re-rendered on every screen resize. Do I need to put it into the 'mounted' life-cycle of my Vue instance to make this work?

感谢您的帮助!

推荐答案

试试这个

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

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

这篇关于使用 Vue.js + Vuetify 有条件地绑定类?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆