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 ...
随机推荐
- Java开发环境之Maven
查看更多Java开发环境配置,请点击<Java开发环境配置大全> 肆章:Maven安装教程 1)下载Maven安装包 https://maven.apache.org/download.c ...
- es题目
1.elasticsearch了解多少,说说你们公司es的集群架构,索引数据大小,分片有多少,以及一些调优手段 .2.elasticsearch的倒排索引是什么?3.elasticsearch 索引数 ...
- c++控制输出的字体颜色
SetConsoleTextAttribute(参数表).SetConsoleTextAttribute()函数是一个API设置字体颜色和背景色的函数.参数表中使用两个属性(属性之间用,隔开).Get ...
- Linux TTY函数跟踪
1. 介绍 本文介绍了TTY打开.TTY读和TTY写操作的函数跟踪过程 2. 示例 下面是一个简单的Linux TTY打开和读写过程 #include <termios.h> #inclu ...
- Spring Security 3多用户登录实现之二 多登录界面展示
作者 接前讲,首先针对一个多种用户类型的登录需求,需要先实现多种用户类型的登录界面的展示,Spring Security提供了这样一个接口来帮助我们实现多种用户类型的登录界面的展示,这个接口就是Aut ...
- java项目部署到LIINUX
天领导给个任务,把java项目部署到liunx服务器上.现记录步骤,方便以后查看.项目部署服务器步骤:服务器信息:弹性IP地址:xx.xx.xxx.xx账号:root密码:cjw@100 数据库信息: ...
- python面试题&练习题之运算符与if控制
1.任意的输入10个数字,按从大到小排序 l2 = [] for i in range(1,11): num = input('输入第{}个数字'.format(i)) if num.isdigit( ...
- codeforces B. Make Them Odd -C++stl之set的使用
B. Make Them Odd There are nn positive integers a1,a2,…,ana1,a2,…,an. For the one move you can choos ...
- Can't generate API documentation in l5-swagger
Can't generate API documentation in l5-swagger Ask Question Asked 3 months ago Active 1 month ago Vi ...
- 4个MySQL优化工具AWR,帮你准确定位数据库瓶颈!(转载)
对于正在运行的mysql,性能如何,参数设置的是否合理,账号设置的是否存在安全隐患,你是否了然于胸呢? 俗话说工欲善其事,必先利其器,定期对你的MYSQL数据库进行一个体检,是保证数据库安全运行的重要 ...