使用VUE开发后台项目,后台项目需要进行后台根据浏览器窗口进行变化,需要使用vue来监听浏览器的窗口变化。

<template>
    <div class="content" :style="height"></div>
</template> <script>
export default {
  name: 'App',
  data () {
  return {
height:'',
  }
  },
  components:{},
  methods:{
    getHeight(){
      this.height = window.innerHeight - + 'px';
    }
  },
  created(){
    window.addEventListener('resize', this.getHeight);
    this.getHeight()
  },
  destroyed(){
    window.removeEventListener('resize', this.getHeight)
  }
}
</script>

vue---监听浏览器窗口的宽度的更多相关文章

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

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

  2. vue监听浏览器窗口大小变化

    首先,页面初始化mounted的时候,通过 document.body.clientWidth 和 document.body.clientHeight 来获取到浏览器的宽和高,然后通过 window ...

  3. vue动态监听浏览器窗口高度

    HTML: <div ref="page"></div> JS: data(){ return{ clientHeight:'', } } mounted( ...

  4. 用jQuery监听浏览器窗口的变化

    $(window).resize(function () { //当浏览器大小变化时 alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(docume ...

  5. JS实时监听浏览器宽度的变化

    boot:function(){ //加载页面时执行一次 changeMargin(); //监听浏览器宽度的改变 window.onresize = function(){ changeMargin ...

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

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

  7. js监听浏览器tab窗口切换

    js监听浏览器tab窗口切换 ——IT唐伯虎 摘要:js监听浏览器tab窗口切换. if (document.hidden !== undefined) {  document.addEventLis ...

  8. vue JS实现监听浏览器返回按键事件

    // 这个是监听浏览器回退键的returnButton () { let vm = this; $(document).ready(function () { if (window.history & ...

  9. Vue 监听鼠标左键 鼠标右键以及鼠标中键修饰符click.left&contextmenu&click.middle

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 测试MongoDB的自动分片

    MongoDB的自动分片: test库分片配置: db.shards.find(){ "_id" : "shard0000", "host" ...

  2. 从客户端(content="xxxxx")中检测到有潜在危险的 Request.Form 值——较合理解决方案

    1,修改配置文件: <httpRuntime requestValidationMode = "2.0" /> 以上修改是必须的,因为高版本的.netframework ...

  3. keepalived日志显示脚本能执行成功,但是amoeba程序没启动起来,单独执行脚本amoeba能启动成功,放到keepalived里面启动不起来

    keepalived日志如图: 解决:keepalived还有crontab等计划任务自动执行脚本,并不会有本地用户的环境变量,需要在脚本里面加 . /etc/profile  引入本地用户的环境变量

  4. 《TensorFlow2深度学习》学习笔记(四)对笔记二中的模型增加正确率展示

    全部代码如下:(红色部分为与笔记二不同之处) #1.Import the neccessary libraries needed import numpy as np import tensorflo ...

  5. CentOS7安装Supervisor3.1.4

    supervisord 负责管理进程的server端,配置文件是/etc/supervisor/supervisord.conf supervisorctl client端的命令行工具,管理子进程,配 ...

  6. PySpark 的背后原理--在Driver端,通过Py4j实现在Python中调用Java的方法.pyspark.executor 端一个Executor上同时运行多少个Task,就会有多少个对应的pyspark.worker进程。

    PySpark 的背后原理 Spark主要是由Scala语言开发,为了方便和其他系统集成而不引入scala相关依赖,部分实现使用Java语言开发,例如External Shuffle Service等 ...

  7. python学习之多窗口切换

    多窗口切换: from selenium import webdriver d = webdriver.Firefox() d.window_handles #显示所有的窗口 d.current_wi ...

  8. python笔记35-装饰器

    前言 python装饰器本质上就是一个函数,它可以让其他函数在不需要做任何代码变动的前提下增加额外的功能,装饰器的返回值也是一个函数对象. 很多python初学者学到面向对象类和方法是一道大坎,那么p ...

  9. gson之将对象转化成json字符串的方法

    public class GsonUtil { /** * 将object对象转成json格式字符串 */ public static String toJson(Object object) { G ...

  10. 长为N的数组,元素范围是0-N-1,其中只有一个数是重复的,找出这个重复元素

    思路:如果限制空间复杂度为O(1),我们就无法采用哈希表的方法去求解.题目中数组中所以数字都在范围[0, N-1],因此哈希表的大小为N即可.因此我们实际要做的就是对N个范围为0到N-1的数进行哈希, ...