vue.js - 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}"
因为断点返回 bool 值。
您可以使用 vuetify.breakpoint.name 获取当前断点名称(字符串)