在使用vue.js框架的时候，有时候会希望在页面渲染完成之后，再执行函数方法来处理初始化相关的操作，如果只处理页面位置、宽或者高时，必须要在页面完全渲染之后才可以，页面没有加载完成之前，获取到的宽高不准确。使用过jquery的都知道，有个ready方法可以使用，但vue.js则需要结合watch和nextTick方法来使用。

　　watch():用于观察Vue实例上的数据变动。

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

　　　　

　　　　

　　　　

　　　　

　　注：其中 imgHeight 为 watch 的检测对象，当 imgHight 的值发生变化时，就会触发watch()事件里边的回调。

参考资料：

　　https://jingyan.baidu.com/article/0320e2c134092b1b86507b64.html

vue中通过js控制页面样式方法的更多相关文章

  1. Flex中使用CSS控制页面样式

    Using file: Stylebounding.mxml Stylebounding2.mxml myCSS0329.css 在Flex4中使用CSS控制样式,既可以直接在MXML文件中写样式,也 ...

  2. js 控制页面跳转的5种方法

    js 控制页面跳转的5种方法 编程式导航: 点击跳转路由,称编程式导航,用js编写代码跳转. History是bom中的 History.back是回退一页 Histiory.go(1)前进一页 Hi ...

  3. Jsp页面跳转和js控制页面跳转的几种方法

    Jsp 页面跳转的几种方法 1. RequestDispatcher.forward() 在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servle ...

  4. 利用来JS控制页面控件显示和隐藏有两种方法

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一:  1 2 document.getEle ...

  5. JS控制页面内容

    JS操作页面内容 innerText:普通标签内容(自身文本与所有子标签文本)innerHTML:包含标签在内的内容(自身文本及子标签的所有)value:表单标签的内容outerHTML:包含自身标签 ...

  6. vue中使用js动画与velocity.js

    一:vue中使用js动画 根据上一篇安装animate.css之后 vue中有动画的钩子函数,@before-enter是内容由无到有的时候自动监听触发的函数,函数会接收到参数el,这样可以动态设置样 ...

  7. js控制div样式显示与隐藏，JS通过点击超链接右边（指定位置）显示一个图标

    原文出自:https://blog.csdn.net/seesun2012 javascript基础篇,老土的方法解决js控制div样式,便于新手理解,粗暴的不能再粗暴,如果你是高手,请忽略! 思路: ...

  8. 前端（十二）—— JavaScript基础操作：if语句、for循环、while循环、for...in、for...of、异常处理、函数、事件、JS选择器、JS操作页面样式

    JavaScript基础操作 一.分支结构 1.if语句 if 基础语法 if (条件表达式) { 代码块; } // 当条件表达式结果为true,会执行代码块:反之不执行 // 条件表达式可以为普通 ...

  9. vue中使用echarts的两种方法

    在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中 ...

随机推荐

  1. (转)ORA-01502

    问题:ora-01502 索引或这类索引的分区处于不可用状态 引发:移动数据表分区,导致索引失效 解决:重建失效索引 1. select index_name ,status  from user_i ...

  2. 使用Word 2010群发邮件

    1.建立数据库,这里我使用了excel 字段:电子邮件地址,名字 填写需要发送的数据 2.新建word文档,这里我使用了word2010 点击工具栏邮件 开始邮件合并,电子邮件 选择收件人,使用现有列 ...

  3. 从ReadImage到ML- 一个不错的博客

    实在对不起原作者,为了不把文章淹没在 转载的海洋里.... 原文链接:     http://www.cnblogs.com/tornadomeet/archive/2012/09/26/270404 ...

  4. 点击之后上传图片到页面 input type="file" 样式

    <!DOCTYPE html><head> <meta http-equiv="Content-Type" content="text/ht ...

  5. Map使用操作系统内存的情况

    public static void main(String[] args) { System.out.println("程序启动-->可用内存:"+(getSystemMe ...

  6. Drop it FreeCodeCamp

    function drop(arr, func) { // Drop them elements. for(var start=0 ;start<arr.length; start++){ if ...

  7. Laravel的路由功能

    只能在当前方法内加载视图和URL跳转!

  8. [USACO17JAN]Promotion Counting

    线段树合并. 正解好像不是线段树合并,但是出于练手的目的写了线段树合并. 大概就是对于左右子树,如果有一个为空,返回非空的,如果都不为空,就把这两个整合到一起就行了. #include <ios ...

  9. 一次 Laravel 性能分析全程笔记

    大家都知道 laravel 项目写起来是挺爽,但是在生产环境性能不高,我们来抽丝剥茧分析我自己项目的运行时间消耗: Bootstrap 耗时 步骤 耗时 Illuminate\Foundation\B ...

  10. 《黑白团团队》第八次团队作业：Alpha冲刺 第三天

    项目 内容 作业课程地址 任课教师首页链接 作业要求 团队项目 填写团队名称 黑白团团队 填写具体目标 认真负责,完成项目 团队项目Github仓库地址链接. 第三天 日期:2019/6/17 成员 ...