Vuetify 在特定网格大小上添加类答案

【问题标题】：Vuetify add class on certain grid sizeVuetify 在特定网格大小上添加类
【发布时间】：2018-12-07 11:02:53
【问题描述】：

如果元素的网格大小为xs（因此仅在移动设备上），我试图仅向v-flex 添加一个类。下面的代码显示了它背后的思考过程。但是这不起作用，那么我怎样才能应用一个只在特定网格大小上的类呢？

   <v-flex xs12 lg6 :class="{'roomPadding': xs != visible }">
      <p> My room </p>
   </v-flex>

【问题讨论】：

您忘记添加问题
:class="{'roomPadding': $vuetify.breakpoint.xs}" 参见文档breakpoint object 和visibility
@Traxo 非常有用，谢谢！对于任何好奇如何将类应用于除xs 之外的每个网格元素的人，它是：{'room': true != $vuetify.breakpoint.xs }

【解决方案1】：

使用断点：

:class="{'roomPadding': $vuetify.breakpoint.xs}"

请参阅有关 breakpoint object 和 visibility 的文档

如果您想将该类应用于每个断点（即屏幕大小）除了 xs，您可以使用：

:class="{'roomPadding': !$vuetify.breakpoint.xs}"（通知!）
或
:class="{'roomPadding': $vuetify.breakpoint.smAndUp}"

因为断点返回布尔值。
您可以使用vuetify.breakpoint.name 获取当前断点名称（字符串）

【讨论】：

我不知道为什么这对我不起作用。例如：'font-weight-bold': $vuetify.breakpoint.smAndDown
@Begueradj “不起作用”是什么意思？检查错误日志，或者查看您是否首先在正确的元素上应用了该类，或者提供更多代码。它必须“工作”。有时 vuetify 使用 content-class 而不是 class，所以一切都取决于您真正想要实现的目标以及“不起作用”是什么意思。
有一个典型的情况是这样不行的：page refresh

【解决方案2】：

我试过了，还是不行

<v-app :class="{'pagemargin': !$vuetify.breakpoint.xs}">

但是当我使用 vuetify 类时这有效

<v-app :class="{'yellow': !$vuetify.breakpoint.xs}">

【讨论】：