首頁 > web前端 > Vue.js > 主體

vue3頁載入完成後怎麼取得寬度、高度

WBOY
發布: 2023-05-29 15:31:22
轉載
2604 人瀏覽過

    vue3頁面載入完成後取得寬度、高度

    #剛好H5專案有用到這個需求,頁面載入完成後取得目前頁面高度。

    
    
    登入後複製

    用vue3.2版本的也可以用語法糖來處理,直接上程式碼:

    
    
    登入後複製

     vue3頁載入完成後怎麼取得寬度、高度

    ##vue3之vue3.2取得dom元素的寬高

    知識點:ref,nextTike

    • #ref可以用於dom物件的獲取,以及建立一個響應式的普通物件類型

    • nextTick是一個函數,它接受一個函數作為參數,nextTick官網定義是‘將回調推遲到下一個DOM 更新周期之後執行’,

    未使用nextTike

    
    
    
    
    
    
    登入後複製

    vue3頁載入完成後怎麼取得寬度、高度

    **注意:**這裡的list並沒有立即增加

    問題在於我們改變list的值時,vue並不是立刻去更新dom,而是在一個事件循環最後再去更新dom,這樣可以避免不必要的計算和dom操作,對提高效能非常重要。

    那麼我們需要在dom更新完成後,再去取得ul的高度,這時候就需要用到nextTick了,

    使用ref nextTick

    
    
    
    
    
    
    登入後複製

    vue3頁載入完成後怎麼取得寬度、高度#

    以上是vue3頁載入完成後怎麼取得寬度、高度的詳細內容。更多資訊請關注PHP中文網其他相關文章!

    相關標籤:
    來源:yisu.com
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板
    關於我們 免責聲明 Sitemap
    PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!