怎么使用vue获取屏幕的宽度

这篇文章主要介绍“怎么使用vue获取屏幕的宽度”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“怎么使用vue获取屏幕的宽度”文章能帮助大家解决问题。

1.使用document.documentElement方法获取屏幕的宽高

windowWidth: document.documentElement.clientWidth, //获取屏幕宽度
windowHeight: document.documentElement.clientHeight, //获取屏幕高度

2.在watch中实时监听屏幕宽高

watch: {
windowHeight (val) {
let that = this;
console.log("实时屏幕高度：",val, that.windowHeight );
},
windowWidth (val) {
let that = this;
console.log("实时屏幕宽度：",val, that.windowHeight );
}
},

3.使用mounted函数获取屏幕宽高

mounted() {
var that = this;
window.onresize = () => {
return (() => {
window.fullHeight = document.documentElement.clientHeight;
window.fullWidth = document.documentElement.clientWidth;
that.windowHeight = window.fullHeight; //获取屏幕高度
that.windowWidth = window.fullWidth; //获取屏幕宽度
})()
};
},

为什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。

关于“怎么使用vue获取屏幕的宽度”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。