欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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加載完再獲取,但是結(jié)果并不如我們所想,又想到用一個

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

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

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

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

通過ref來獲取dom元素

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

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

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

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

首先要獲取當(dāng)前點擊的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) {
//這個是獲取當(dāng)前menuItem值,用index來區(qū)分當(dāng)前元素是v-for 產(chǎn)生的數(shù)組中的第幾個數(shù)
  let getMenuText = this.$refs.menuItem[index].innerText;
}

總結(jié)

以上所述是小編給大家介紹的vue獲取dom元素注意事項,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

  • vue中三種插槽(默認插槽/具名插槽/作用域插槽)的區(qū)別詳解

    vue中三種插槽(默認插槽/具名插槽/作用域插槽)的區(qū)別詳解

    默認插槽,具名插槽,作用域插槽是vue中常用的三個插槽,這篇文章主要為大家介紹了這三種插槽的使用與區(qū)別,感興趣的小伙伴可以了解一下
    2023-08-08
  • Vue3中v-if和v-for優(yōu)先級實例詳解

    Vue3中v-if和v-for優(yōu)先級實例詳解

    Vue.js中使用最多的兩個指令就是v-if和v-for,下面這篇文章主要給大家介紹了關(guān)于Vue3中v-if和v-for優(yōu)先級的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-09-09
  • 開發(fā)Vue樹形組件的示例代碼

    開發(fā)Vue樹形組件的示例代碼

    本篇文章主要介紹了開發(fā)Vue樹形組件的示例代碼,它展現(xiàn)了組件的遞歸使用。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12
  • 基于Vue實現(xiàn)圖書管理功能

    基于Vue實現(xiàn)圖書管理功能

    這篇文章主要為大家詳細介紹了基于Vue實現(xiàn)圖書管理功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-10-10
  • vue v-on:click傳遞動態(tài)參數(shù)的步驟

    vue v-on:click傳遞動態(tài)參數(shù)的步驟

    這篇文章主要介紹了vue v-on:click傳遞動態(tài)參數(shù)的步驟,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • vue調(diào)用原生方法交互解讀

    vue調(diào)用原生方法交互解讀

    這篇文章主要介紹了vue調(diào)用原生方法交互,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • vue 使用微信jssdk,調(diào)用微信相冊上傳圖片功能

    vue 使用微信jssdk,調(diào)用微信相冊上傳圖片功能

    這篇文章主要介紹了vue 使用微信jssdk,調(diào)用微信相冊上傳圖片功能,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • vue項目配置代理如何解決跨域問題

    vue項目配置代理如何解決跨域問題

    這篇文章主要介紹了vue項目配置代理如何解決跨域問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • vue中的非父子間的通訊問題簡單的實例代碼

    vue中的非父子間的通訊問題簡單的實例代碼

    這篇文章主要介紹了vue中的非父子間的通訊問題簡單的實例代碼,需要的朋友可以參考下
    2017-07-07
  • vue el-select與el-tree實現(xiàn)支持可搜索樹型

    vue el-select與el-tree實現(xiàn)支持可搜索樹型

    本文主要介紹了vue el-select與el-tree實現(xiàn)支持可搜索樹型,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-08-08

最新評論