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

vue獲取dom元素注意事項(xiàng)

 更新時(shí)間：2017年12月28日 08:37:44   作者：蓓蕾心晴  
這篇文章主要介紹了vue獲取dom元素注意事項(xiàng)及vue獲取dom元素的內(nèi)容,需要的朋友可以參考下

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

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

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

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

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

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

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

通過(guò)ref來(lái)獲取dom元素

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

ref 被用來(lái)給元素或子組件注冊(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屬性

<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.然后在點(diǎn)擊事件方法中使用ref

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

總結(jié)

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

相關(guān)文章

最新評(píng)論