在使用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. 使用QT创建PythonGUI程序

    1. 挑选 GUI设计程序: wxPython Vs. pyQt4 参考链接:http://www.douban.com/group/topic/14590751/ (1):wxWidgets wxP ...

  2. cms初步构想

    一.cms系统的初步构想 公司正准备使用yii框架重新弄个类cms的系统: 初步的功能: 栏目文章的管理 SEO的优化功能 推荐位管理 一些思路和规则: 数据库表名的定义:通过"大模块名称+ ...

  3. eclipse的小技巧

    Eclipse 保存文件时自动格式化代码 很多同学不知道Eclipse有个很有用的功能,就是自动格式源代码的功能,一般大家都是直接Ctrl+Shift+F手动格式化,多浪费时间. 其实Eclipse里 ...

  4. 微信App支付：微信支付的appid，appsecret，商户号mch_id，微信交易支付密钥(mch_key)在哪里查看

    1-1) 查看微信支付 appid 的方法 微信支付使用的 appid, 是微信服务号的 appid, 需要你登录微信服务号后台, 在 开发-基本配置/开发者ID(AppID) 中查看微信支付 app ...

  5. Arguments Optional FreeCodeCamp

    function add() { if(typeof arguments[0] !== "number" || (arguments.length > 1 && ...

  6. Go 语言一本通

    什么是GO语言? Go 是一个开源的编程语言,它能让构造简单.可靠且高效的软件变得容易. Go是从2007年末由Robert Griesemer, Rob Pike, Ken Thompson主持开发 ...

  7. shell中的交互模式：expect

    在shell开发中,我们连接FTP或者passwd或sudo等操作时,需要手动输入密码.对于自动化而言,这显然是不合适的.而expect的强交互模式解决了这个问题.工作中偶有涉及到这个,个人也是简单的 ...

  8. [网络流24题] 方格取数问题/骑士共存问题 (最大流->最大权闭合图)

    洛谷传送门 LOJ传送门 和太空飞行计划问题一样,这依然是一道最大权闭合图问题 “骑士共存问题”是“方格取数问题”的弱化版,本题解不再赘述“骑士共存问题”的做法 分析题目,如果我们能把所有方格的数都给 ...

  9. Problem 3

    Problem 3 # Problem_3.py """ The prime factors of 13195 are 5, 7, 13 and 29. What is ...

  10. HDU 3567 Eight II

    Eight II Time Limit: 2000ms Memory Limit: 65536KB This problem will be judged on HDU. Original ID: 3 ...