20.Vue.$nextTick

Vue.$nextTick 當(dāng)dom更新后觸發(fā),結(jié)合案例理解:

場景: 頁面種有個按鈕(button),一個隱藏的div,當(dāng)點(diǎn)擊button時,顯示div并獲取寬度,如果顯示div時就獲取寬度總是為零,放入Vue.$nextTick中獲取。

案例

<template>
  <div>
      <button @click="getDivInfo">點(diǎn)擊獲取div高度,寬度是:{{divInfoW}}</button>
      <div v-show="isShow == true" id="divInfo" style="border:1px solid red;">這是一個div</div>
  </div>
</template>
<script>
export default {
  data(){
    return {
        isShow: false,
        divInfoW: 0
    }
  },
  methods:{
    getDivInfo(){
      //
      this.isShow = !this.isShow
      //如果設(shè)置true后立刻獲取div寬度是0,因為dom還未更新完畢
      //this.divInfoW = document.getElementById('divInfo').offsetWidth;
      //放入nextTick中獲取
      this.$nextTick(function(){
        this.divInfoW = document.getElementById('divInfo').offsetWidth;
      });
    }
  }
}
</script>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容