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

Question

如果元素的网格大小为v-flex（仅在移动设备上），我将尝试仅向xs添加一个类。下面的代码显示了其背后的思考过程。但是，这是行不通的，那么我如何应用仅适用于特定网格大小的类？

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

Answer 1

使用断点：

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

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

如果要将类应用于每个断点（即屏幕尺寸）除外 xs，则可以使用：

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

因为断点返回布尔值。
您可以使用vuetify.breakpoint.name

获得当前的断点名称（字符串）

Answer 2

我已经尝试过了，但是没有用

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

但这在我使用vuetify类时有效

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