Vue 延遲載入橫幅

Question

我在頁面上有 5 個橫幅，根據使用者的點擊選擇顯示或隱藏。

此時橫幅資料來自 API，我正在為 API 上的每個橫幅條目迭代橫幅元件，知道如何僅在使用者點擊後下載圖像嗎？ 我嘗試過延遲加載本機行為，但圖像在開始時加載，因為它們全部出現在第一次滾動時，我通過用戶單擊顯示或隱藏圖像。

<banner-base
    v-for="banner in entry.banners"
    :key="banner.id"
    :slug-ficha="slugSelected"
    :promo-selected="promoSelected"
    :banner-id="banner.id"
/>

Answer 1

您可以在 img 元素上使用 v-show 指令，它僅在按一下橫幅時顯示。