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