vue如何实时获取页面宽度
时间: 2023-06-06 13:08:17 浏览: 48
可以使用Vue的computed属性来实时获取页面宽度,代码示例如下:
```
<template>
<div>页面宽度: {{ windowWidth }}</div>
</template>
<script>
export default {
data() {
return {
windowWidth: 0
}
},
computed: {
getWindowWidth() {
return window.innerWidth
}
},
created() {
window.addEventListener('resize', () => {
this.windowWidth = this.getWindowWidth
})
this.windowWidth = this.getWindowWidth
}
}
</script>
```
这段代码会监听resize事件,当窗口大小变化时更新页面宽度。
相关问题
vue怎么获取页面宽度
你可以使用window.innerWidth来获取页面的宽度,代码示例如下:
var width = window.innerWidth;
console.log("页面宽度为:" + width);
vue右侧页面 宽度怎么自适应呢?
对于Vue中的右侧页面,可以使用CSS中的flex布局或者grid布局来实现自适应宽度。可以在右侧页面的父级容器中设置display: flex或者display: grid,并设置对应的属性值来实现自适应宽度。同时,也可以使用JavaScript来获取右侧页面的宽度,然后在页面加载或者窗口大小改变时动态修改页面样式。