使用Vue时,有时候需要获取页面渲染完成后某个元素的高度,但由于数据没有渲染完成,可能获取不到准确的高度,这时需要使用 watch结合this.$nextTick()来解决

watch:{
	listData:function(){
		this.$nextTick(function(){
			//some code
			console.log($('ul').height())//ul最新的高度
		})
	}
}
  • nextTick:在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM
  • watch:用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调
nextTick用途

应用场景:需要在视图更新之后,基于新的视图进行操作

Logo

前往低代码交流专区

更多推荐