使用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. [Reproduced] How to Improve Code Quality?

    How to Improve Code Quality? Ref: https://www.perforce.com/blog/sca/what-code-quality-and-how-improv ...

  2. Go - IDE的选择与GoLand的安装

    目录 常用编辑器的选择 IDE的选择 GoLand的下载与安装 下载 安装 常用编辑器的选择 编写go程序,可以选择的编辑软件有很多,其中包括: notepad++ sublime visual st ...

  3. 数据库迁移Flyway

    为什么需要Flyway 日常开发常常会遇到一些这样的场景 小红开发一个模块在本地数据库增加了两个字段,并且改动了dao层的代码提交到git.这时候小黄拉取了代码Run很可能报错. 如果在上线正式环境的 ...

  4. 运维笔试Python编程题

    一.用Python语言把列表[1,3,5,7,9]倒序并将元素变为字符类型,请写出多种方法: 第一种方法: list = [1, 3, 5, 7, 9] list.reverse() list2 = ...

  5. ARTS-week5

    Algorithm 给定两个有序整数数组 nums1 和 nums2,将 nums2 合并到 nums1 中,使得 num1 成为一个有序数组.说明:初始化 nums1 和 nums2 的元素数量分别 ...

  6. oracle plsql 实现apriori算法

    对apriori关联关系算法研究了一段时间,网上能搜到的例子,大部分是python写的,数据集长得像下面这样: [[I1,I2,I5],[I2,I4],[I2,I3],[I1,I2,I4],[I1,I ...

  7. HBase的二级索引

    使用HBase存储中国好声音数据的案例,业务描述如下: 为了能高效的查询到我们需要的数据,我们在RowKey的设计上下了不少功夫,因为过滤RowKey或者根据RowKey查询数据的效率是最高的,我们的 ...

  8. sass变量的作用域

    嵌套规则内定义的变量只能在嵌套规则内使用(局部变量),不在嵌套规则内定义的变量则可在任何地方使用(全局变量). <div class="test">111111111& ...

  9. robot framework中如何为每个测试用例,测试集准备数据或销毁数据

    Suite Setup:在这个测试集的所有测试用例开始测试之前运行(类似于junit的@BeforeClass) Suite Teardown:在这个测试集的所有测试用例结束之后运行(类似于junit ...

  10. Codevs 1305 Freda的道路(矩阵乘法 DP优化)

    1305 Freda的道路 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 大师 Master 题目描述 Description Freda要到Rainbow的城堡去玩了.我们可以认 ...