对于自建vue框架响应式布局

最新推荐文章于 2025-10-03 10:31:10 发布

原创最新推荐文章于 2025-10-03 10:31:10 发布 · 5.9k 阅读

13 ·

CC 4.0 BY-SA版权

前端Vue框架专栏收录该内容

12 篇文章

订阅专栏

博客介绍了在Vue中根据浏览器宽度控制元素显示的方法。先在data中定义浏览器当前宽度变量并初始化，用watch监听该变量值的改变，通过mounted实时监测浏览器宽度变换来更新值，最后在html代码中用v-show控制显示与否。

1. 首先在data(){ }中，定义一个浏览器当前宽度的变量，并初始化当前加载出来的浏览器的宽度，

data(){

return{

screenWidth:document.body.clientWidth,

}

然后用watch去监听screenWidth值的改变，

watch:{
    screenWidth(val){
        this.screenWidth = val
        let self = this
        if (this.screenWidth<=767) {
             self.peen = false
            self.seen = true
        }else{
           self.peen = true
            self.seen = false
        }
    }
}

那请问值怎么改变呢？当然是用mounted去实时监测浏览器宽度的变换去改变screenWidth的值

mounted () {
    const that = this
    window.onresize = () => {
        return (() => {
            window.screenWidth = document.body.clientWidth
            that.screenWidth = window.screenWidth
        })()
    }
}

然后就是在html代码中用v-show去控制true or false

methods:{
    ResponsiveMenu () {
       if(this.showitem===false){
           this.showitem=true
       }else if(this.showitem===true){
           this.showitem=false
       }
    }
},