vue中通过js控制页面样式方法

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

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

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

    

    

    

    

 

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

 

参考资料:

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

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361450.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Memcached入门指南

1 概览 Memcached是一个免费开源,高性能的,分布式内存对象缓存系统,为了加快动态web应用程序,减轻数据库负载。 Memcached是一个内存中的基于键/值存储任意数据小片段(字符,对象),存…

css正則匹配、模糊匹配

//所有class包含font-red的p标签 p[class~"font-red"] {color: red;} [abc^"def"] 选择 abc 属性值以 "def" 开头的所有元素 [abc$"def"] 选择 abc 属性值以 "def" 结尾的所有元素 [abc*"def"] 选择 abc 属性值中…

快速指南:剖析JBoss BPM跨进程通信

(文章来宾与北美红帽公司高级解决方案架构师杰伊保拉杰共同撰写) 几周的提示与技巧文章将深入探讨JBoss BPM Suite,特别是有关如何在两个流程之间进行通信的问题。 在进入解决方案详细信息之前,让我们首先约束将要讨论的用例。 …

字符串中全角半角之间的转换

前几天,在做表单验证的时候,发现用户在输入表单内容的时候,正常情况下都是半角输入,但是也有可能是全角输入,所以就牵扯到全角输入内容的验证,这里便提供全角和半角之间的转换函数,与大家分享一…

Android HAL 层,三个重要的结构体的源码~

最近在学习android HAL 层 ~ 离不开这三个数据结构~~先贴出来 typedef struct hw_module_t { /** tag must be initialized to HARDWARE_MODULE_TAG */ uint32_t tag; /** major version number for the module */ uint16_t version_major; /** minor version number …

React使用的扩展

待续。。。 转载于:https://www.cnblogs.com/wenxuehai/p/11387188.html

使用命令行工具创建WildFly OpenShift应用程序

通过使用快速入门,可以在OpenShift上轻松配置WildFly的新实例。 只需单击一下,您就可以准备就绪! 通常,OpenShift的高级用户使用命令行工具 。 但是,您无法使用CLI工具创建WildFly墨盒。 但现在已解决错误1134134 。 …

word-break属性和css换行显示

这几天在做项目的时候,遇到了比较棘手的问题,便是在一个标签里边展示内容,如果说展示中文汉字,一点问题都没有,但是只要连续展示英文字母或者中文的标点符号(中间不带空格),那么所渲…

第四种行转列

--动态处理 select A.StuName,A.BZKTypeName,cast(A.BKCODE as varbinary(MAX)) even, row_number() over (partition by StuName,BZKTypeName order by getdate()) ID into #t1 from BKLIST A --where StuName林健辉 declare sql1 varchar(max) declare sql2…

React-router的基本使用

1、安装使用 $ npm install -S react-router import { Router, Route, hashHistory } from react-router;render((<Router history{hashHistory}><Route path"/" component{App}/></Router> ), document.getElementById(app)); 1.1、版本问题 reac…

使用反应流API将Akka流与rxJava结合在一起

这次只是一篇简短的文章&#xff0c;因为我仍在尝试这种东西。 关于反应式编程有很多话题。 在Java 8中&#xff0c;我们有Stream API&#xff0c;我们有rxJava我们有ratpack &#xff0c;Akka有akka-streams 。 这些实现的主要问题是它们不兼容。 您不能将一个实现的订阅者连…

九宫格有规律高亮滚动效果

前几天朋友去面试&#xff0c;面试官要求当场用九宫格写出一个滚动有规律的大转盘滚动高亮效果&#xff0c;结果可想而知。如下图&#xff1a; 也就是说当页面刚进来的时候&#xff0c;红色方块在左上角&#xff0c;接下来按照图上所标注的箭头方向来依次循环。当我听说了这个面…

[源码学习]调试Razor从哪里开始

使用ASP.NET MVC时&#xff0c;我们知道&#xff0c;要使用Views中的视图&#xff0c;需要在Action中写 return View(); 这个方法返回的返回值是一个 ViewResult&#xff0c;进入这个类&#xff0c;继承了父类ViewResultBase后只写了MasterName属性和FindView方法。 不过已经开…

使用Maven原型高效创建Eclipse模块

Maven Archetype是一个项目模板工具包&#xff0c;可为开发人员提供生成内置或自定义脚手架工件的参数化版本的方法。 最近&#xff0c;我将其应用于我们的Xiliary P2存储库&#xff0c;以实现Eclipse模块存根创建的自动化。 由于效果很好&#xff0c;所以我认为值得在这篇文章…

ubuntu 编译 /usr/bin/ld: cannot find 问题解决

参考文档&#xff1a; http://www.iq38.com/38536.html linux下编译应用程序常常会出现如下错误&#xff1a; /usr/bin/ld: cannot find -lxxx 意思是编译过程找不到对应库文件。其中&#xff0c;-lxxx表示链接库文件 libxxx.so。 注&#xff1a;有时候&#xff0c;由于库文件是…

CSS知识点整理(2):框模型,定位

1. 框模型&#xff1a;Box Model 规定了元素处理元素框处理元素内容、外边距、边框、内边距的方式。 2. 当边距给定的值 可以小于4个。CSS定义了一些规则、处理这中情况&#xff1a; 如果缺少左外边距的值&#xff0c;则使用右外边距的值。如果缺少下外边距的值&#xff0c;则…

Vux的安装使用

1、Vux的安装 1.1、vue-cli的vux模板生成项目 可以直接使用 vue-cli 的模板生成一个 vux 项目 vue init airyland/vux2 projectName 由此可以直接使用 vux。&#xff08;或许运行项目可能会报错&#xff0c;那是 vue-cli 初始项目的通病&#xff09; 1.2、手动安装 vux 首先在项…

Spring Data JPA教程:获取所需的依赖关系

在创建使用Spring Data JPA的应用程序之前&#xff0c;我们需要获取所需的依赖关系。 这篇博客文章标识了必需的组件&#xff0c;并描述了如何使用Maven获得它们。 让我们开始吧。 其他阅读&#xff1a;如果您不熟悉Spring Data JPA&#xff0c;则应该阅读以下博客文章&…

元素属性的添加删除(原生js)

添加属性 odiv.setAttribute("title","hello div!");odiv.setAttribute("class","boxClass");odiv.setAttribute("hello","divTag");//自定义属性设(hello"divTag") 获取属性 var vodiv.getAttribute(&…

framelayout

编写的mail.xml文件: <?xml version"1.0" encoding"utf-8"?><FrameLayout xmlns:android"http://schemas.android.com/apk/res/android" android:id"id/frame" android:layout_width"fill_parent" android:layou…