mounted(){
    setTimeout(()=>{
     this.contentToggle();
    },1000)
  },

methods:{
   contentToggle(){
    console.log(this.$refs.bodyFont.offsetHeight);
   }
  }

vue想要獲取dom元素的高，一般情況下我們都可以想到寫在mounted函數里，即dom加載完再獲取，但是結果并不如我們所想，又想到用一個

創新互聯-專業網站定制、快速模板網站建設、高性價比白云網站開發、企業建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式白云網站制作公司更省心,省錢,快速模板網站建設找我們，業務覆蓋白云地區。費用合理售后完善，十余年實體公司更值得信賴。

this.$nextTick(()=>{
   
    //函數
})

來獲取，發現根本沒用啊/。。

所以好的辦法就是用一個setTimeout定時器，時間可以設為0，但是有時候生效，有時候不生效，還是加一個小的時間值比較保險，這樣就可以保證獲取到的一定是dom加載后的了，該原理適用于vue中很多傳值的問題，剛開始獲取不到傳過來的值，用一個setTimeout就可。

ps：VUE獲取DOM元素內容

通過ref來獲取dom元素

在vue官網上對ref的解釋

ref 被用來給元素或子組件注冊引用信息。引用信息將會注冊在父組件的 $refs 對象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素; 如果用在子組件上，引用就指向組件實例

當 v-for 用于元素或組件的時候，引用信息將是包含 DOM 節點或組件實例的數組 

比如我現在要實現的效果是點擊用v-for生成的li ，獲取到該元素的值

首先要獲取當前點擊的li元素，我們要做的是

1.給dom添加點擊事件和ref屬性

<li class="sidebar-list" v-for="(item, index) in meunList" @click="setPageMenu(index)" ref="menuItem">
  <router-link class="sidebar-a" :to="{ path: item.listLink }" >{{item.listTitle}}</router-link>
</li>

2.然后在點擊事件方法中使用ref

setPageMenu(index) {
//這個是獲取當前menuItem值，用index來區分當前元素是v-for 產生的數組中的第幾個數
  let getMenuText = this.$refs.menuItem[index].innerText;
}

總結

以上所述是小編給大家介紹的vue獲取dom元素注意事項，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創新互聯網站的支持！

文章題目：vue獲取dom元素注意事項
當前鏈接：http://vcdvsql.cn/article30/pegsso.html

成都網站建設公司_創新互聯，為您提供自適應網站、外貿網站建設、品牌網站設計、小程序開發、軟件開發、外貿建站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯