Vuetify Breakpoint与CSS Helper类

时间:2019-08-02 10:34:37

标签: javascript html css vue.js vuetify.js

我已经看到Vuetify文档中张贴了不同的示例,或者在Internet上发布了一些代码片段,这些示例涉及Vuetify断点或CSS帮助器类,以标记对屏幕尺寸有反应的元素。

是否有标准或推荐的做法,或者是否有很小的性能差异来确定何时应使用一种或另一种?

例如:

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

1 个答案:

答案 0 :(得分:1)

CSS帮助器类仅依赖于浏览器及其对媒体查询的处理。 我敢打赌,它比总是在v-if之后的一段JavaScript快得多。

此外,如果您确实需要使用一段JavaScript来使某些元素可见或隐藏,则在Vue中,最好使用v-show(它使用元素的display属性而不是添加/像v-if一样从DOM中删除)。请参阅spec的详细信息。