javascript - Vuetify 断点与 CSS Helper 类

Question

我在 Vuetify 文档或互联网上的代码片段中看到了不同的示例，这些示例涉及 Vuetify 断点或 CSS 帮助程序类，以标记对屏幕大小有反应的元素。

是否有标准或推荐的做法，甚至是很小的性能差异来确定我何时应该使用其中一种或另一种？

例如:

<p v-if="$vuetify.breakpoint.hiddenMdAndUp">...</p>
// vs
<p class="hidden-md-and-up">...</p>

Answer 1

CSS 辅助类完全依赖于浏览器及其对媒体查询的处理。我敢打赌它比一段总是在 v-if 后面的 javascript 快得多。

此外，如果您真的需要使用一段 javascript 来使某些元素可见或隐藏，在 Vue 中，最好使用 v-show(它使用 display 元素的属性，而不是像 v-if 那样从 DOM 添加/删除)。查看 spec详情。