在使用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. js控制页面的全屏展示和退出全屏显示

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

随机推荐

  1. asp.net 防止按钮重复提交

    1.将按钮属性设置如下: <asp:Button ID="btConfirm" runat="server" Text="Confirm&quo ...

  2. 关于1Byte 1K 1M 1G(换算)

    1个字节等于8位二进制 .... 1byte=8bit 1K = 1024 byte =1024byte*8b 说白一点就是 1M等于1024个K组成,而1K又等于1024B,所以1M等于1024K乘 ...

  3. view动画库

    Android View Animations这个项目收集了各种有趣的动画效果. 所有效果: Attension Flash, Pulse, RubberBand, Shake, Swing, Wob ...

  4. LINUX 笔记-iostat命令

    显示CPU和I/O统计信息 iostat的不带参数的显示CPU和I/ O的所有分区的统计信息 -c Display the CPU utilization report. -d Display the ...

  5. Objective-C 中的 BOOL

    之前开发了一个针对单个数据模型,自动建表.增删改查等操作的 ORM 库,后边在 iPhone 5c 上使用时,出现了 crash 的情况. 该项目在 Github 开源,项目地址为SXJDatabas ...

  6. 关闭windows10更新

    除了能够禁用Windows自动更新外,还能一键禁用Windows安全中心.Windows Defender.Windows防火墙. 下载地址 https://files.cnblogs.com/fil ...

  7. asp.net core 中使用StyleCop.StyleCopAnalyzers

    1.nuget中安装 StyleCop.Analyzers 当前版本1.1.0-beta004 2.在项目根目录新增 stylecop.json文件 { "settings": { ...

  8. linux nohup screen注解

    一.nohup  & 二.screen

  9. 使用 Gogs 搭建自己的 Git 服务器

    安装过程分为这些步骤: 新建用户: 下载源码编译 / 下载预编译二进制打包: 运行安装: 配置调整: 配置 nginx 反向代理: 保持服务运行: 注意,这里默认你已经安装好了 MySQL 服务器和 ...

  10. hdu1255 覆盖的面积 线段树-扫描线

    矩形面积并 线段树-扫描线裸题 #include<stdio.h> #include<string.h> #include<algorithm> #include& ...