在使用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. UWP Tiles

    1.我们建议安装通知库 NuGet 程序包 详细内容 2.我们建议安装NotificationsVisualizerLibrary 这是 The official NotificationsVisua ...

  2. Stanford概率图模型： 第一讲 有向图-贝叶斯网络

    原文链接(系列):http://blog.csdn.net/yangliuy/article/details/8067261 概率图模型(Probabilistic Graphical Model)系 ...

  3. Python中生成器,迭代器,以及一些常用的内置函数.

    知识点总结 生成器 生成器的本质就是迭代器. 迭代器:Python中提供的已经写好的工具或者通过数据转化得来的. 生成器:需要我们自己用Python代码构建的 创建生成器的三种方法: 通过生成器函数 ...

  4. 如何使用Matlab做数字信号处理的仿真1

    例如 第三版数字信号处理P51 -1.14习题时域离散信号的相关性研究x(n)=Asin(ωn)+u(n),其中ω=π/16,u(n)是白噪声,现要求 ⑴.产生均值为0,功率P=0.1的均匀分布白噪声 ...

  5. java 常用API 包装

    package com.oracel.demo01; public class Baozhuang { //将字符串转成基本数据类型 public static void main(String[] ...

  6. Pyhton学习——Day3

    # li = [1,12,9,"age","alex"]# #列表表示为[]括起来# #列表用","分割每个元素# #列表中的元素可以是数字 ...

  7. K3 销售合同开发

    1.实现销售合同中[直接客户]信息的录入后,自动带出关联[省份]的信息,根据BOS单据的基本设置不能将省份信息写成字 段进行推送,故需要在BOS单据中进行插件开发: 开发过程中有个关键表: 1)选择直 ...

  8. php设置cookie和删除cookie

    设置cookie Example : - set - <?php setcookie( "name", "value", "future_tim ...

  9. 【模板】 非旋转treap

    模板:luogu P3369 [模板]普通平衡树 code: #include <cstdio> #include <cstdlib> const int MAX_N=1000 ...

  10. Win32 编程消息常量（C#)

    public class WinMessages { #region 基本消息 public const int WM_NULL = 0x0000; public const int WM_CREAT ...