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

爱被打了一巴掌 2023-06-10 12:25 7阅读 0赞

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

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

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

![1281517-20180329111132633-1519041866.png][]

![1281517-20180329111207919-1664209955.png][]

![1281517-20180329110544312-726888930.png][]

![1281517-20180329111727453-737264621.png][]

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

参考资料：

[https://jingyan.baidu.com/article/0320e2c134092b1b86507b64.html][https_jingyan.baidu.com_article_0320e2c134092b1b86507b64.html]

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

[1281517-20180329111132633-1519041866.png]: /images/20230531/ff18fe4aad2c48459cd65b2638017f4c.png
[1281517-20180329111207919-1664209955.png]: /images/20230531/a9d742da26b14a76a343ffbdda10c091.png
[1281517-20180329110544312-726888930.png]: /images/20230531/c830ae8b597e486ea52bc211d66d2597.png
[1281517-20180329111727453-737264621.png]: /images/20230531/d9155c5aa0364286a1df4f54e232df4c.png
[https_jingyan.baidu.com_article_0320e2c134092b1b86507b64.html]: https://jingyan.baidu.com/article/0320e2c134092b1b86507b64.html

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

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

　　在使用vue.js框架的时候，有时候会希望在页面渲染完成之后，再执行函数方法来处理初始化相关的操作，如果只处理页面位置、宽或者高时，必须要在页面完全渲染之后才可以，页面没有

爱被打了一巴掌/ 2023年06月10日 12:25/ 0 赞/ 8 阅读

相关通过js代码修改css样式的几种方法

使用js代码可以改变css的样式，下面就详细介绍几种通过js代码改变css样式的几种方法和注意事项先来看下这次例子的效果图 ![20191019174434724.gif

喜欢ヅ旅行/ 2023年06月09日 04:59/ 0 赞/ 21 阅读

相关 Vue---Vue通过highlight.js实现页面代码高亮显示

1.安装vue-highlightjs和highlight.js npm install --save vue-highlightjs npm install

深碍√TFBOYSˉ_/ 2023年02月28日 15:18/ 0 赞/ 11 阅读

相关 vue 通过less 设置全局样式

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

以你之姓@/ 2023年02月24日 08:16/ 0 赞/ 23 阅读

相关 div添加样式 vue_vue.js

![5c1a340d86cd39c7fae0bba1ca3c916a.png][] vue.js 中M V MV代表哪一部分 <body> <!--

曾经终败给现在/ 2023年01月02日 02:29/ 0 赞/ 247 阅读

相关 js控制样式，页面往前效果

js控制节点样式变化，做到往前推动效果 -------------------- 监听某个值，改变节点样式，做到往前推动效果不能同时改变两个，或两个以上

谁践踏了优雅/ 2022年12月08日 05:22/ 0 赞/ 142 阅读

相关 js控制css样式

方法一: 将css单独写在一个css文件中, 在js中通过className属性赋值创建一个XXX.css文件, 内容如下: .aDiv { di

我会带着你远行/ 2022年08月09日 05:13/ 0 赞/ 247 阅读

相关通过样式控制页面布局

原始页面写法： ![Center][] 原始页面效果： ![Center 1][] 添加样式修改后页面写法： td div { floa

末蓝、/ 2022年07月11日 04:20/ 0 赞/ 184 阅读

相关【JavaScript】js控制样式

网页的三个层次简单理解：结构：html标签样式：css样式表行为：js及其扩展 JS控制样式： 1.找准对象

男娘i/ 2022年06月11日 08:47/ 0 赞/ 300 阅读

相关 Vue.js 中使用样式

文章目录在Vue中使用样式使用class样式使用内联样式源代码在Vue中使用样式

柔情只为你懂/ 2022年03月18日 02:56/ 0 赞/ 268 阅读