Vue.js中頁面加載完成后執行一個方法的示例分析

這篇文章給大家分享的是有關Vue.js中頁面加載完成后執行一個方法的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

首先我們會想著在mounted或者created里面加入想要執行的方法，但是有的時候會遇到在你執行這個方法的時候，頁面還并沒有被渲染完成，所以就會出現這個方法在匹配頁面標簽報錯的情況。

解決思路：

1.通過子頁面調用父頁面的方法，因為在子頁面開始渲染的時候，你的父頁面肯定是已經渲染好了的，前提這里的方法中是去找尋父頁面的標簽。

2.直接在本頁面監視一個參數，發現參數被初始化了，說明頁面也已經加載完成，因為你的頁面用到了這個參數。

方法1案例：tab頁里的子頁面如果沒有內容就隱藏

父頁面代碼

<el-tabs v-model="initTab" type="card">
 <el-tab-pane label="1信息" name="tab1">
  1
 </el-tab-pane>
 <el-tab-pane label="2報告" name="tab2">
  2
 </el-tab-pane>
 <el-tab-pane label="3信息" name="tab3">
  3
 </el-tab-pane>
 <el-tab-pane label="4信息" name="tab4">
  <ziyemian-group @tabShow="tabShow" title="4信息" v-if="detailInfo">
  </ziyemian-group>
 
 </el-tab-pane>
 <el-tab-pane label="5信息" name="tab5">
  5
 </el-tab-pane>
 <el-tab-pane label="其它信息" name="tab6">
  6
 </el-tab-pane>
</el-tabs>
 
import ZiyemianGroup from './ZiyemianGroup.vue'
components: {
 ZiyemianGroup
},
data () {
  return {
    detailInfo: {}，
    initTab：‘tab1'
  }
}
methods: {
 tabShow: (data) => {
  document.getElementsByClassName('el-tabs__item').item(4).style.display = data
 },
}

然后是ZiyemianGroup.vue的代碼，這里主要就是方法調用，頁面自己搞定

data () {
 return {
  list: []
 }
},
mounted () {
 this.init()
},
methods: {
 init() {
  if (list.length > 0) {
    this.$emit('whiteShow', 'inline')
  } else {
    this.$emit('whiteShow', 'none')
  }
 )
}

list是子頁面的內容，這樣如果子頁面沒有內容就可以隱藏掉了

方法2案例：我這邊需要tab頁隱藏

<el-tabs v-model="initTab" type="card">
 <el-tab-pane label="1信息" name="tab1">
  1
 </el-tab-pane>
 <el-tab-pane label="2報告" name="tab2">
  2
 </el-tab-pane>
 <el-tab-pane label="3信息" name="tab3">
  3
 </el-tab-pane>
 <el-tab-pane label="4信息" name="tab4">
  <ziyemian-group title="4信息" v-if="detailInfo">
  </ziyemian-group>
 
 </el-tab-pane>
 <el-tab-pane label="5信息" name="tab5">
  5
 </el-tab-pane>
 <el-tab-pane label="其它信息" name="tab6">
  6
 </el-tab-pane>
</el-tabs>
 
import ZiyemianGroup from './ZiyemianGroup.vue'
components: {
 ZiyemianGroup
},
data () {
  return {
    detailInfo: {}，
    initTab：‘tab1'
  }
}
watch: {
 detailInfo: function () {
  this.$nextTick(function () {
   this.tabShow()
  })
 }
},
methods: {
  tabShow () {
    document.getElementsByClassName('el-tabs__item').item(6).style.display = 'none' // 隱藏tab6
  }
}

nextTick方法，意思是在下次 DOM 更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的 DOM。

隱藏tab的方法我用了原生js，因為vue生成后的頁面和寫的vue頁面有所差別，所以我直接用了最笨的方法進行匹配。

感謝各位的閱讀！關于“Vue.js中頁面加載完成后執行一個方法的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！