淺談Vue.js 關(guān)于頁(yè)面加載完成后執(zhí)行一個(gè)方法的問(wèn)題

更新時(shí)間：2019年04月01日 11:13:48 作者：ITKouSyou

這篇文章主要介紹了Vue.js 關(guān)于頁(yè)面加載完成后執(zhí)行一個(gè)方法的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

首先我們會(huì)想著在mounted或者created里面加入想要執(zhí)行的方法，但是有的時(shí)候會(huì)遇到在你執(zhí)行這個(gè)方法的時(shí)候，頁(yè)面還并沒(méi)有被渲染完成，所以就會(huì)出現(xiàn)這個(gè)方法在匹配頁(yè)面標(biāo)簽報(bào)錯(cuò)的情況。

解決思路：

1.通過(guò)子頁(yè)面調(diào)用父頁(yè)面的方法，因?yàn)樵谧禹?yè)面開(kāi)始渲染的時(shí)候，你的父頁(yè)面肯定是已經(jīng)渲染好了的，前提這里的方法中是去找尋父頁(yè)面的標(biāo)簽。

2.直接在本頁(yè)面監(jiān)視一個(gè)參數(shù)，發(fā)現(xiàn)參數(shù)被初始化了，說(shuō)明頁(yè)面也已經(jīng)加載完成，因?yàn)槟愕捻?yè)面用到了這個(gè)參數(shù)。

方法1案例：tab頁(yè)里的子頁(yè)面如果沒(méi)有內(nèi)容就隱藏

父頁(yè)面代碼

<el-tabs v-model="initTab" type="card">
 <el-tab-pane label="1信息" name="tab1">
  1
 </el-tab-pane>
 <el-tab-pane label="2報(bào)告" 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的代碼，這里主要就是方法調(diào)用，頁(yè)面自己搞定

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

list是子頁(yè)面的內(nèi)容，這樣如果子頁(yè)面沒(méi)有內(nèi)容就可以隱藏掉了

方法2案例：我這邊需要tab頁(yè)隱藏

<el-tabs v-model="initTab" type="card">
 <el-tab-pane label="1信息" name="tab1">
  1
 </el-tab-pane>
 <el-tab-pane label="2報(bào)告" 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 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個(gè)方法，獲取更新后的 DOM。

隱藏tab的方法我用了原生js，因?yàn)関ue生成后的頁(yè)面和寫(xiě)的vue頁(yè)面有所差別，所以我直接用了最笨的方法進(jìn)行匹配。

以上所述是小編給大家介紹的Vue.js 關(guān)于頁(yè)面加載完成后執(zhí)行一個(gè)方法的問(wèn)題詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: