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}"

查看有关断点对象和可见性的文档

如果要将该类应用于除之外的 每个断点（即屏幕大小）xs，则可以使用：

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

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