在使用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. MyEclipse 中的一些快捷键

    @import url(/css/cuteeditor.css); ------------------------------------- MyEclipse 快捷键1(CTRL) ------- ...

  2. -1.#IND000 &&图像类型转换

    (1):float acos(float x) 参数x的范围为-1.0f到1.0f之间,返回值范围在0.0f到3.141592653f之间,值得注意的是:当x超出[-1.0f,1.0f]这个范围时此函 ...

  3. Q1002 四则运算

    #include<iostream> using namespace std; int main() { long long sum1,sum2,sum3,sum4; long int a ...

  4. SQL数据查询2

    USE h CREATE TABLE zy1( empno INT, ename ), job ), mgr INT, hiredate DATE, sal DOUBLE, COOM DOUBLE, ...

  5. Java 分布式事务

    0 引言 本文主要介绍java中分布式事务以及对应的解决方案. 1 分布式事务产生的原因 1.1 数据库分库分表 当数据库单表一年产生的数据超过1000W,那么就要考虑分库分表,具体分库分表的原理在此 ...

  6. Python爬虫3-----浏览器伪装

    1.浏览器伪装技术原理 当爬取CSDN博客时,会发现返回403,因为对方服务器会对爬虫进行屏蔽,故需伪装成浏览器才能爬取.浏览器伪装一般通过报头进行. 2.获取网页的报头 3.代码: import u ...

  7. 互联网组织的未来：剖析 GitHub 员工的任性之源

    转自:http://innolauncher.com/github/ 互联网组织的未来:剖析 GitHub 员工的任性之源 This entry was posted in Blogon 一月 4, ...

  8. SQL 到 NOSQL 的思维转变

    转自:http://blogread.cn/it/article/3130?f=wb SQL 到 NOSQL 的思维转变 NOSQL系统一般都会宣传一个特性,那就是性能好,然后为什么呢?关系型数据库发 ...

  9. [CodeForces]981C Useful Decomposition

    李煜东dalao今天给我们讲课了QwQ ppt上一道题 英文题说一下题意吧,以后又看不懂了 将一棵树分割成多个简单路径,每个边只能在一条路径上,但至少有一个公共节点. 输出简单路径分割方法/No 由题 ...

  10. 【explain】MySQL联表查询中的驱动表

    写在前面 1.不要求每个人一定理解 联表查询(join/left join/inner join等)时的mysql运算过程 2.不要求每个人一定知道线上(现在或未来)哪张表数据量大,哪张表数据量小 3 ...