vue通过监听动态设置页面样式

最新推荐文章于 2023-03-15 22:52:29 发布

原创最新推荐文章于 2023-03-15 22:52:29 发布 · 784 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

前端js 同时被 3 个专栏收录

36 篇文章

订阅专栏

vue

25 篇文章

订阅专栏

css

7 篇文章

订阅专栏

本文介绍了一个基于Vue的组件，通过监听窗口尺寸变化，动态调整顶部导航的高度。当屏幕高度大于或等于1080px时，将顶部高度设为400px，否则保持300px。使用了模板字符串和window.onresize事件来实现动态样式更新。

data(){
    return {
        topHeight: 300,
        clientHeight: 0
    }
}
mounted(){
    this.clientHeight=`${document.documentElement.clientHeight}`
    let that=this
    window.onresize=function(){
        that.clientHeight=`${document.documentElement.clientHeight}`
        if(that.clientHeight>=1080){
            that.topHeight=400    
        }else{
            that.topHeight=300
        }
    }
}
<div class="m-top" :style="{'height' : topHeight+'px'}"></div>

相关语法：1.`${}` 模板字符串 2.window.onresize当浏览器被重置大小时执行Javascript代码

3. :style使用方法：https://www.cnblogs.com/weichenzhiyi/p/8406021.html

tip:其他动态样式问题也可以考虑通过此方案解决