使用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. XAMPP + PhpStorm + Xdebug本地实验环境搭建

    参考: 下载合适的XDebug 点击这里,选择合适xdebug XAMPP配置 php_xdebug-xxxx.dll 拷贝dll至 D:\XAMPP\php\ext php.ini 文末追加 [XD ...

  2. MySQL/MariaDB数据库的MHA实现高可用实战

      MySQL/MariaDB数据库的MHA实现高可用实战 作者:尹正杰  版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.MySQL高可用常见的解决方案 1>.Multi-Master ...

  3. C语言基础知识-运算符与表达式

    C语言基础知识-运算符与表达式 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.常用运算符分类 1>.算术运算符 用于处理四则运算. 2>.赋值运算符 用于将表达式的 ...

  4. 安装JDK(Windows)

    安装JDK java 安装JDK 下载JDK并安装 配置环境变量 变量名:JAVA_HOME 变量值:C:\Program Files\Java\jdk1.8.0_144 (jdk安装路径) 变量名: ...

  5. not syncing: Attempted to kill init

    这个是selinux造成的原因. 解决方法:  键系统启动的时候,按下‘e’键进入grub编辑界面,编辑grub菜单,选择“kernel /vmlinuz-2.6.23.1-42.fc8 ro roo ...

  6. SpringBoot项目下的mvnw与mvnw.cmd

    Maven是一个常用的构建工具,但是Maven的版本和插件的配合并不是那么完美,有时候你不得不切换到一个稍微旧一些的版本,以保证所有东西正常工作. 而Gradle提供了一个Wrapper,可以很好解决 ...

  7. Vue 项目中 ESlint 配置

    前言 对于 ESlint 这一块一直存在一些疑问,今天看到一个文章内容挺好的,这里拿来了. 一.eslint 安装 1.全局安装 npm i -g eslint 全局安装的好处是,在任何项目我们都可以 ...

  8. input 时间字段默认值

    背景: 时间字段展示默认值,开始时间为当天 0点,结束时间为当天晚上12点 代码: <input style="Width: 180px;float:left ;" type ...

  9. EasyUI之dataGrid的行内编辑

    $(function () { var datagrid; //定义全局变量datagrid var editRow = undefined; //定义全局变量:当前编辑的行 datagrid = T ...

  10. 【Selenium-WebDriver实战篇】基于java的selenium之验证码识别内容

    ==================================================================================================== ...