vue---监听浏览器窗口的宽度
使用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---监听浏览器窗口的宽度的更多相关文章
- vue监听浏览器窗口的变化,随着窗口变化调整里面table的宽高
1.在data中设置: tableHeight:"500", screenHeight:window.innerHeight, 2.在mounted中设置: mounted() { ...
- vue监听浏览器窗口大小变化
首先,页面初始化mounted的时候,通过 document.body.clientWidth 和 document.body.clientHeight 来获取到浏览器的宽和高,然后通过 window ...
- vue动态监听浏览器窗口高度
HTML: <div ref="page"></div> JS: data(){ return{ clientHeight:'', } } mounted( ...
- 用jQuery监听浏览器窗口的变化
$(window).resize(function () { //当浏览器大小变化时 alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(docume ...
- JS实时监听浏览器宽度的变化
boot:function(){ //加载页面时执行一次 changeMargin(); //监听浏览器宽度的改变 window.onresize = function(){ changeMargin ...
- vue 监听页面宽度变化 和 键盘事件
vue 监听页面窗口大小 export default { name: 'Full', components: { Header, Siderbar }, data () { return { scr ...
- js监听浏览器tab窗口切换
js监听浏览器tab窗口切换 ——IT唐伯虎 摘要:js监听浏览器tab窗口切换. if (document.hidden !== undefined) { document.addEventLis ...
- vue JS实现监听浏览器返回按键事件
// 这个是监听浏览器回退键的returnButton () { let vm = this; $(document).ready(function () { if (window.history & ...
- Vue 监听鼠标左键 鼠标右键以及鼠标中键修饰符click.left&contextmenu&click.middle
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 【Spring Boot】Spring Boot之自定义拦截器
一.拦截器的作用 将通用的代码抽取出来,达到复用的效果.比如可以用来做日志记录.登录判断.权限校验等等 二.如何实现自定义拦截器 1)创建自定义拦截器类并实现HandlerInterceptor类 / ...
- ArrayList 与LinkedList 的区别及分别的优缺点
ArrayList,与LinkedList都是属于实现了List接口的类.首先从名字前缀开始看 ,Array表示数组,Link表示链表. 所以ArrayList底层是基于动态数组的.而LinkedL ...
- Alpha冲刺(10/10)——追光的人
1.队友信息 队员学号 队员博客 221600219 小墨 https://www.cnblogs.com/hengyumo/ 221600240 真·大能猫 https://www.cnblogs. ...
- JS获取访客IP进行自动跳转
因业务需要进行地区判断跳转指定站点,下面是我个人实现的办法,分享给大家,仅供参考,切勿做非法用途 第一步,获取IP并判断归属地 直接使用搜狐的IP库查询接口 <script type=" ...
- 解读 v8 排序源码
前言 v8 是 Chrome 的 JavaScript 引擎,其中关于数组的排序完全采用了 JavaScript 实现. 排序采用的算法跟数组的长度有关,当数组长度小于等于 10 时,采用插入排序,大 ...
- Vue --- 基础指令
目录 表单指令 条件指令 循环指令 分隔符(了解) 过滤器 计算属性 监听属性 冒泡排序 表单指令 使用方法: v-model 数据双向绑定 v-model绑定的变量可以影响表单标签的值,反过来表单标 ...
- AtCoder Beginner Contest 129 解题报告
传送门 写了四个题就跑去打球了.第五题应该能肝出来的. A - Airplane #include <bits/stdc++.h> using namespace std; inline ...
- LeetCode 741. Cherry Pickup
原题链接在这里:https://leetcode.com/problems/cherry-pickup/ 题目: In a N x N grid representing a field of che ...
- LeetCode 959. Regions Cut By Slashes
原题链接在这里:https://leetcode.com/problems/regions-cut-by-slashes/ 题目: In a N x N grid composed of 1 x 1 ...
- 23-ESP8266 SDK开发基础入门篇--编写Android TCP客户端 , 加入消息处理
https://www.cnblogs.com/yangfengwu/p/11203546.html 先做接收消息 然后接着 public class MainActivity extends App ...