在vue中如何取得dom元素

這篇文章主要介紹了vue取得dom元素注意事項及vue取得dom元素的內容,需要的朋友可以參考下

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

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

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

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;
}

上面是我整理給大家的，希望未來會對大家有幫助。

相關文章：

在webpack中使用devtool詳解

javascript中的隱含呼叫的使用方法？

vue.js如何建立大型單頁應用程式

#在vue中如何實作微信分享朋友圈,傳送朋友

詳解如何實作vuex（詳細教學）

透過vue.js實作微信支付

以上是在vue中如何取得dom元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！