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

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

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

創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比白云網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式白云網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋白云地區(qū)。費(fèi)用合理售后完善，十余年實(shí)體公司更值得信賴。

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

來獲取，發(fā)現(xiàn)根本沒用啊/。。

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

ps：VUE獲取DOM元素內(nèi)容

通過ref來獲取dom元素

在vue官網(wǎng)上對(duì)ref的解釋

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

當(dāng) v-for 用于元素或組件的時(shí)候，引用信息將是包含 DOM 節(jié)點(diǎn)或組件實(shí)例的數(shù)組 

比如我現(xiàn)在要實(shí)現(xiàn)的效果是點(diǎn)擊用v-for生成的li ，獲取到該元素的值

首先要獲取當(dāng)前點(diǎn)擊的li元素，我們要做的是

1.給dom添加點(diǎn)擊事件和ref屬性

  {{item.listTitle}}

2.然后在點(diǎn)擊事件方法中使用ref

setPageMenu(index) {
//這個(gè)是獲取當(dāng)前menuItem值，用index來區(qū)分當(dāng)前元素是v-for 產(chǎn)生的數(shù)組中的第幾個(gè)數(shù)
  let getMenuText = this.$refs.menuItem[index].innerText;
}

總結(jié)

以上所述是小編給大家介紹的vue獲取dom元素注意事項(xiàng)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！