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 相关文章推荐
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
实用框架(iframe)操作代码
Oct 23 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
Oct 09 Javascript
jquery.validate表单验证插件使用详解
Jun 21 jQuery
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
Nov 10 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 Javascript
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
Aug 03 Javascript
jQuery-App输入框实现实时搜索
Nov 19 jQuery
浅谈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
php str_pad 函数用法简介
2009/07/11 PHP
从刷票了解获得客户端IP的方法
2015/09/21 PHP
php自动加载方式集合
2016/04/04 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
CentOS系统中PHP安装扩展的方式汇总
2017/04/09 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
js字符编码函数区别分析
2008/06/05 Javascript
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
深入浅析AngularJS中的module(模块)
2016/01/04 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
vue2.0父子组件及非父子组件之间的通信方法
2017/01/21 Javascript
JS查找英文文章中出现频率最高的单词
2017/03/20 Javascript
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
详解Vue2.x-directive的学习笔记
2017/07/17 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
js实现上传并压缩图片效果
2018/01/10 Javascript
vue中使用echarts制作圆环图的实例代码
2018/07/27 Javascript
js实现的格式化数字和金额功能简单示例
2019/07/30 Javascript
如何正确理解vue中的key详解
2019/11/02 Javascript
Python访问MongoDB,并且转换成Dataframe的方法
2018/10/15 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
Vrbo西班牙:预订您的度假公寓(公寓、乡村房屋…)
2020/04/27 全球购物
大整数数相乘的问题
2012/07/22 面试题
道德模范先进事迹
2014/02/14 职场文书
打架检讨书2000字
2014/02/22 职场文书
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
综合办公室岗位职责
2015/04/11 职场文书
win10安装配置nginx的过程
2021/03/31 Servers