首先,页面初始化mounted的时候,通过 document.body.clientWidth 和 document.body.clientHeight 来获取到浏览器的宽和高,然后通过 window.onresize 来监听浏览器窗口的变化,在这里来改变我们的变量宽和高即可。

(created()的时候不行,因为此时document还没有生成)

<template>
<section class="p-10">
<h1> {{ screenWidth }} × {{ screenHeight }} </h1>
</section>
</template>
<script>
export default {
data() {
return {
screenWidth: '',
screenHeight: ''
};
},
mounted() {
this.screenWidth = document.body.clientWidth;
this.screenHeight = document.body.clientHeight;
window.onresize = () => {
return (() => {
this.screenWidth = document.body.clientWidth;
this.screenHeight = document.body.clientHeight;
})();
};
}
}
</script> <style lang="scss">
</style>

嗯。就酱~~

vue监听浏览器窗口大小变化的更多相关文章

  1. vue 监听页面宽度变化 和 键盘事件

    vue 监听页面窗口大小 export default { name: 'Full', components: { Header, Siderbar }, data () { return { scr ...

  2. vue监听页面大小变化重新刷新布局

    在项目中由于某些div元素在布局的时候需要初始化宽高,因为当浏览器缩小屏幕的时候需要重新刷新页面视图. 分析思路: 1.在store中创建state,用于保存当前浏览器的宽.高值. 2.在mounte ...

  3. Vue监听属性的变化

    监听属性的变化watch: { counter: function (nval, oval) { alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!') }}

  4. vue监听浏览器窗口的变化,随着窗口变化调整里面table的宽高

    1.在data中设置: tableHeight:"500", screenHeight:window.innerHeight, 2.在mounted中设置: mounted() { ...

  5. vue监听路由的变化,跳转到同一个页面时,Url改变但视图未重新加载问题

    引入:https://q.cnblogs.com/q/88214/ 解决方法: 添加路由监听,路由改变时执行监听方法 methods:{ fetchData(){ console.log('路由发送变 ...

  6. vue 监听state 任意值变化、监听mutations actions

    // store.watch((state) => state.count + 1, (newCount) => { // console.log(' 监听') // }) // stor ...

  7. js实现监听浏览器窗口大小改变事件

    window.onresize = function(){   }

  8. vue同一个路由,但参数发生变化,页面不刷新的问题(vue监听路由参数变化重新渲染页面)

    watch: { $route: function(newVal, oldVal) { console.log(oldVal); //oldVa 上一次url console.log(newVal); ...

  9. jquery如何监听浏览器窗口大小并根据不同的大小输出不同的值

    $(window).bind("load resize",function(){ document.documentElement.clientWidth >= 600 ? ...

随机推荐

  1. Unix系统编程()信号类型和默认行为

    信号类型和默认行为 就是讲了有多少个信号类型 好多啊,后面用到了再看...

  2. PHP——文件操作

    自己写的: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  3. 使用info命令查看Redis信息和状态

    redis-cli连接服务器后,使用info命令查看Redis信息和状态: ? 1 info 其中memory段显示了redis的内存使用状态. 以下内容复制自:http://redisdoc.com ...

  4. hdu6134 Battlestation Operational 莫比乌斯第一种形式

    /** 题目:hdu6134 Battlestation Operational 链接:http://acm.hdu.edu.cn/showproblem.php?pid=6134 题意:f(n) = ...

  5. Java解析json(二):jackson

    Java解析json(二):jackson   官方参考 Jackson Home Page:https://github.com/FasterXML/jackson Jackson Wiki:htt ...

  6. python手册

    https://www.crummy.com/software/BeautifulSoup/bs4/doc.zh/

  7. Hadoop源码分析之读文件时NameNode和DataNode的处理过程

    转自: http://blog.csdn.net/workformywork/article/details/21783861 从NameNode节点获取数据块所在节点等信息 客户端在和数据节点建立流 ...

  8. 第二百五十一节,Bootstrap项目实战--响应式轮播图

    Bootstrap项目实战--响应式轮播图 学习要点: 1.响应式轮播图 本节课我们要在导航条的下方做一张轮播图,自动播放最新的重要动态. 一.响应式轮播图 响应式轮播图 第一步,设置轮播器区域car ...

  9. 【BZOJ】1690: [Usaco2007 Dec]奶牛的旅行(分数规划+spfa)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1690 第一题不是水题的题.. 分数规划.. T-T 百度吧..http://blog.csdn.ne ...

  10. ActiveMQ搭建

    下载 到ActiveMQ官网,找到下载点. 目前, 官网为http://activemq.apache.org/ Linux版本下载点之一为:http://apache.fayea.com/activ ...