首先,页面初始化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. [插件] 如何在一个页面中使用多个SWFUpload对象上传文件

    首先需要引入相应的样式和JS文件,还需要借助jQuery的js 提供下载路径:http://pan.baidu.com/s/1EUzca ① 引入js <script type="te ...

  2. php juery ajax 传值

    <script src="__PUBLIC__/jquery-1.11.2.min.js" type="text/javascript"></ ...

  3. php -- PHP5中file_get_contents函数获取带BOM的utf-8文件内容

    最近,在用file_get_contents函数来取得文本的内容的时候,出现了一个情况(如下),苦思冥想了n久,不得其解,最后,果然还是得靠百度啊..... 百度到一个解释,下面是原文: PHP5中的 ...

  4. 【BZOJ】2179: FFT快速傅立叶(fft)

    http://www.lydsy.com/JudgeOnline/problem.php?id=2179 fft裸题.... 为嘛我的那么慢....1000多ms.. #include <cst ...

  5. 【BZOJ】1093: [ZJOI2007]最大半连通子图(tarjan+拓扑序)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1093 两个条件综合起来加上求最大的节点数,那么很明显如果是环一定要缩点. 然后再仔细思考下就是求da ...

  6. 表达式树在LINQ动态查询

    动态构建表达式树,最佳实践版,很实用! public class FilterCollection : Collection<IList<Filter>> { public F ...

  7. 解决spring boot中rest接口404,500等错误返回统一的json格式

    在开发rest接口时,我们往往会定义统一的返回格式,列如: { "status": true, "code": 200, "message" ...

  8. laravel 调试模式及日志配置

    1)调试模式和日志的配置都在 config/app.php 配置文件中 2)打开调试模式 'debug' => env('APP_DEBUG', true) 3)laravel的日志默认已经打开 ...

  9. 使用binlog日志还原数据详解

    1)看一下你的mysql服务器有没开启binlog日志(ON为开启,OFF为未开启) show variables like 'log_bin'; 2)找到你的binlog文件在哪 登录 mysql ...

  10. shell脚本学习总结04--终端信息的获取和设置

    tput tput 命令将通过 terminfo 数据库对您的终端会话进行初始化和操作.通过使用 tput,您可以更改几项终端功能,如移动或更改光标.更改文本属性,以及清除终端屏幕的特定区域. 文本属 ...