특정 그리드 크기에 대한 클래스 추가 설정

특정 그리드 크기에 대한 클래스 추가 설정

나는 단지 수업만 추가하려고 한다.v-flex요소의 그리드 크기가 다음과 같은 경우xs(따라서 모바일에서만).아래의 코드는 그 뒤의 사고 과정을 보여준다.하지만 이것은 작동하지 않는데, 어떻게 특정 그리드 크기에서만 수업을 적용할 수 있을까?

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

중단점 사용:

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

중단점 객체 및 가시성에 대한 문서 참조

클래스를 다음을 제외한 모든 중단점(즉, 화면 크기)에 적용하려는 경우 xs, 사용할 수 있는 항목:

:class="{'roomPadding': !$vuetify.breakpoint.xs}"(notice)!)
또는
:class="{'roomPadding': $vuetify.breakpoint.smAndUp}"

왜냐하면 중단점은 부울 값을 반환하기 때문이다.
다음 명령으로 현재 중단점 이름(문자열)을 얻을 수 있다.vuetify.breakpoint.name

나도 해봤는데 안 되네.

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

하지만 이것은 내가 부비교 수업을 사용했을 때 효과가 있었다.

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

참조URL: https://stackoverflow.com/questions/51081601/vuetify-add-class-on-certain-grid-size