Vue在页面数据渲染完成之后的调用方法


Posted in Javascript onSeptember 11, 2018

在使用Vue框架的时候,有时候需要在Vue在页面数据渲染完成之后调用方法,不然获取不到准确的数据,特别是在获取列表的高度的时候,由于数据没有加载完,获取不到准确的高度。之前在使用jquery的时候,有ready可以帮助我们实现,但是Vue不存在此类方法,我们需要结合watch和this.$nextTick()来实现。

nextTick:在下次 DOM 更新循环结束之后执行延迟回调。

watch:用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调。

之前我是这样子使用nextTick的:

mounted:{

this.$nextTick(function(){

/////方法

})

}

经测试发现实现不了所需要的效果,只有结构,没有数据,即获取不到想要的高度

后发现需要结合watch监听某个属性:

watch:{

asyncArray:function()

 this.$nextTick(function(){
  //////方法
 });
}
}

经测试可用!

以上这篇Vue在页面数据渲染完成之后的调用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery的获取标签名的代码
Jul 16 Javascript
Javascript图像处理—平滑处理实现原理
Dec 28 Javascript
Jquery选中或取消radio示例
Sep 29 Javascript
Javascript的严格模式strict mode详细介绍
Jun 06 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
jquery实现的横向二级导航效果代码
Aug 26 Javascript
简单理解js的冒泡排序
Dec 19 Javascript
JS对象深度克隆实例分析
Mar 16 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 Javascript
Vue-cli3简单使用(图文步骤)
Apr 30 Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 Javascript
浅谈Webpack核心模块tapable解析
Sep 11 #Javascript
原生js检测页面加载完毕的实例
Sep 11 #Javascript
vue props传值失败 输出undefined的解决方法
Sep 11 #Javascript
解决vue props 拿不到值的问题
Sep 11 #Javascript
vue首次赋值不触发watch的解决方法
Sep 11 #Javascript
JavaScript中Array方法你该知道的正确打开方法
Sep 11 #Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 #Javascript
You might like
isset和empty的区别
2007/01/15 PHP
php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
php curl模拟post请求小实例
2013/11/13 PHP
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
PHP 接入支付宝即时到账功能
2016/09/18 PHP
jQuery 中使用JSON的实现代码
2011/12/01 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
Angular 2应用的8个主要构造块有哪些
2016/10/17 Javascript
Bootstrap按钮组简单实现代码
2017/03/06 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
2017/03/10 Javascript
H5图片压缩与上传实例
2017/04/21 Javascript
模块化react-router配置方法详解
2019/06/03 Javascript
js如何实现元素曝光上报
2019/08/07 Javascript
基于javascript原生判断DOM是否加载完毕
2020/10/14 Javascript
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
详解Python的Django框架中的模版相关知识
2015/07/15 Python
python实现微信接口(itchat)详细介绍
2017/10/23 Python
python for和else语句趣谈
2019/07/02 Python
python3在同一行内输入n个数并用列表保存的例子
2019/07/20 Python
一篇文章搞定Python操作文件与目录
2019/08/13 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
python代码中怎么换行
2020/06/17 Python
纯css3显示隐藏一个div特效的具体实现
2014/02/10 HTML / CSS
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
葡萄牙语专业个人求职信
2013/12/10 职场文书
社会实践感言
2014/01/25 职场文书
办公设备采购方案
2014/03/16 职场文书
合作协议书
2014/04/23 职场文书
小学生运动会报道稿
2014/09/12 职场文书
三方股东合作协议书
2014/10/28 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python
pandas求平均数和中位数的方法实例
2021/08/04 Python
Nginx反向代理学习实例教程
2021/10/24 Servers