按照此處的檔案，我正在嘗試使用 Vuetify 可見性類來隱藏小螢屏上的元素。
使用以下類會產生與我想要在較大螢屏尺寸上洗掉元素并將其添加到小螢屏尺寸相反的效果。
<span >
{{ username }}
</span>
我嘗試將類更改為：
<span >
{{ username }}
</span>
但是，這具有相同的效果 - 元素僅出現在小螢屏上。
如果有人知道為什么這些課程沒有按預期作業，我將不勝感激。
uj5u.com熱心網友回復：
您應該添加一個默認顯示，在您的情況下它應該是d-none而不是d-sm-none.
<span >
{{ username }}
</span>
此元素將出現hidden在小螢屏和flex中螢屏設備上。
uj5u.com熱心網友回復：
將默認顯示設定為none，將其他設備螢屏設定為block。
<span >
{{ username }}
</span>
uj5u.com熱心網友回復：
我根據本檔案創建了一個示例作業代碼片段/演示，它作業正常。
new Vue({
el: '#app',
vuetify: new Vuetify(),
})<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://unpkg.com/@mdi/[email protected]/css/materialdesignicons.min.css"/>
<div id="app">
<v-app id="inspire">
<div>
<div class="d-none d-sm-flex">
Not visible on x-small screens
</div>
<div class="d-none d-md-flex">
Not visible on x-small and small screens
</div>
<div class="d-none d-lg-flex">
Not visible on x-small, small and medium screens
</div>
</div>
</v-app>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/479361.html
標籤：Vue.js Vuetify.js