使用 Vue.js + Vuetify 有条件地绑定类? [英] Conditionally bind class with Vue.js + Vuetify?
本文介绍了使用 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屋!
查看全文