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

Ott*_*tto 0 vue.js vuejs2 vuetify.js

v-flex如果元素的网格大小为xs(因此仅在移动设备上),则尝试仅向添加一个类。下面的代码显示了其背后的思考过程。但是,这不起作用,因此如何应用仅适用于特定网格大小的类?

   <v-flex xs12 lg6 :class="{'roomPadding': xs != visible }">
      <p> My room </p>
   </v-flex>
Run Code Online (Sandbox Code Playgroud)

Tra*_*axo 6

使用断点:

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

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

如果要将该类应用于除之外的 每个断点(即屏幕大小)xs,则可以使用:

:class="{'roomPadding': !$vuetify.breakpoint.xs}"(注意!

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

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