這篇文章主要介紹了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;
}上面是我整理給大家的，希望未來會對大家有幫助。
相關文章：
以上是在vue中如何取得dom元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！
