Vue.$nextTick 当dom更新后触发,结合案例理解:
场景: 页面种有个按钮(button),一个隐藏的div,当点击button时,显示div并获取宽度,如果显示div时就获取宽度总是为零,放入Vue.$nextTick中获取。
案例
<template>
<div>
<button @click="getDivInfo">点击获取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
//如果设置true后立刻获取div宽度是0,因为dom还未更新完毕
//this.divInfoW = document.getElementById('divInfo').offsetWidth;
//放入nextTick中获取
this.$nextTick(function(){
this.divInfoW = document.getElementById('divInfo').offsetWidth;
});
}
}
}
</script>