仅对Vuetify应用程序中的某些屏幕宽度应用CSS类

Question

Vuetify提供了各种CSS助手类，允许您根据其定义的屏幕大小断点显示/隐藏元素，例如

<div class="d-lg-none">
hide on screens wider than large (lg)
</div>

但是，有没有一种方法可以在某个断点选择性地应用类，例如，如果我想在大屏幕及以上的屏幕上使用类text-right，在所有其他屏幕上使用text-left，有没有方法可以做到这一点？

我意识到我可以编写自己的媒体查询，但我不愿意这样做，因为这需要我复制Vuetify断点。

Answer 1

查看断点服务

您可以使用它以编程方式设置类。例如：

<div :class="$vuetify.breakpoint.lgAndUp?'text-left':'text-right'">
Text align by breakpoint
</div>

https://codeply.com/p/OeODqdpdrm

另请注意：有响应文本对齐类，例如：

<div class="text-left text-lg-right">
Text responsive align
</div>