vue獲取dom元素注意事項
更新時間：2017年12月28日 08:37:44 作者：蓓蕾心晴
這篇文章主要介紹了vue獲取dom元素注意事項及vue獲取dom元素的內(nèi)容,需要的朋友可以參考下
mounted(){
setTimeout(()=>{
this.contentToggle();
},1000)
},
methods:{
contentToggle(){
console.log(this.$refs.bodyFont.offsetHeight);
}
}
vue想要獲取dom元素的高，一般情況下我們都可以想到寫在mounted函數(shù)里，即dom加載完再獲取，但是結果并不如我們所想，又想到用一個
this.$nextTick(()=>{
//函數(shù)
})
來獲取，發(fā)現(xiàn)根本沒用啊/。。
所以好的辦法就是用一個setTimeout定時器，時間可以設為0，但是有時候生效，有時候不生效，還是加一個小的時間值比較保險，這樣就可以保證獲取到的一定是dom加載后的了，該原理適用于vue中很多傳值的問題，剛開始獲取不到傳過來的值，用一個setTimeout就可。
ps：VUE獲取DOM元素內(nèi)容
通過ref來獲取dom元素
在vue官網(wǎng)上對ref的解釋
ref 被用來給元素或子組件注冊引用信息。引用信息將會注冊在父組件的 $refs 對象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素; 如果用在子組件上，引用就指向組件實例
當 v-for 用于元素或組件的時候，引用信息將是包含 DOM 節(jié)點或組件實例的數(shù)組
比如我現(xiàn)在要實現(xiàn)的效果是點擊用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來區(qū)分當前元素是v-for 產(chǎn)生的數(shù)組中的第幾個數(shù)
let getMenuText = this.$refs.menuItem[index].innerText;
}
總結
以上所述是小編給大家介紹的vue獲取dom元素注意事項，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
Vue.js每天必學之過渡與動畫，對Vue.js過渡與動畫進行深入學習，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
element el-tooltip動態(tài)顯示隱藏(有省略號顯示,沒有省略號不顯示)
本文主要介紹了element el-tooltip動態(tài)顯示隱藏,主要實現(xiàn)有省略號顯示,沒有省略號不顯示,具有一定的參考價值,感興趣的可以了解一下2023-09-09
Vue3動態(tài)組件怎么進行異常處理？下面本篇文章帶大家聊聊Vue3 動態(tài)組件異常處理的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2023-02-02
這篇文章主要為大家詳細介紹了Vue實現(xiàn)手機計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
最近學習了hooks,特地寫一篇文章加深一下印象,下面這篇文章主要給大家介紹了關于vue3?hook自動導入原理及使用的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10
Vue.js計算機屬性computed和methods方法詳解
這篇文章主要為大家詳細介紹了Vue.js計算機屬性computed和methods方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要為大家詳細介紹了Vue表情輸入組件，微信face表情組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-02-02
本教程是介紹如何在vue中使用provide和inject,在 Vue 中,provide 和 inject 是用于實現(xiàn)祖先組件向后代組件傳遞數(shù)據(jù)的一種方式,對vue中provide、inject的使用方法感興趣的朋友一起看看吧2024-02-02
Vue3中的toRef和toRefs的區(qū)別和用法示例小結
toRef和toRefs可以用來復制reactive里面的屬性然后轉成 ref,它保留了響應式,也保留了引用,也就是你從 reactive 復制過來的屬性進行修改后,除了視圖會更新,原有 ractive 里面對應的值也會跟著更新,本文介紹Vue3中toRef和toRefs的區(qū)別和用法,需要的朋友可以參考下2024-08-08
本篇文章主要介紹了Vue 開發(fā)模式下跨域問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06