VUE3动态获取浏览器宽度

最新推荐文章于 2024-01-25 14:25:39 发布

辰辰北

最新推荐文章于 2024-01-25 14:25:39 发布

阅读量2.8k

点赞数 1

分类专栏： JavaScript 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_42943920/article/details/120881156

版权

JavaScript 专栏收录该内容

77 篇文章 1 订阅

订阅专栏

VUE3中使用JS获取浏览器宽度

<body>
    <div id="app">
        <button>当前浏览器宽度：{{width}}</button>
    </div>
    <script src="./vue3.0/vue导入/vue.global.js"></script>
    <script>
        const app = Vue.createApp({
            data(){
                return{
                    width:document.body.clientWidth,
                }
            },
            // 进入mounted生命钩子开始动态监测浏览器宽度
            mounted(){
                window.onresize = () => {
                    return this.width = document.body.clientWidth;
                }
            },
            // 销毁，防止继续占用内存
            destroyed () {
                window.onresize = null
            },
        }).mount('#app')
    </script>
</body>

辰辰北

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
VUE3动态获取浏览器宽度

VUE3中使用JS获取浏览器宽度<body> <div id="app"> <button>当前浏览器宽度：{{width}}</button> </div> <script src="./vue3.0/vue导入/vue.global.js"></script> <script> const app = Vue.createAp...
复制链接

扫一扫