vue如何监听屏幕尺寸变化
在vue中监听屏幕尺寸变化的方法：1.新建项目，引入vue；2.定义data值，记录屏幕尺寸；3.使用window.onresize方法获取屏幕尺寸；4.使用watch方法实时监听屏幕尺寸；
具体步骤如下：
首先，新建一个html项目，并在项目中引入vue；
import Vue from 'vue'
引入vue后，在项目中使用data定义一个值，用于记录屏幕尺寸；
data(){
return{
screenWidth: null,
}
}
data值定义好后，使用window.onresize方法获取屏幕尺寸；
mounted () {
this.screenWidth = document.body.clientWidth
window.onresize = () => {
return (() => {
this.screenWidth = document.body.clientWidth
})()
}
}
最后，获取到屏幕尺寸后，使用watch方法即可实时监听屏幕尺寸；
watch: {
screenWidth: {
handler: function (val, oldVal) {
if (val < 1550) {
console.log('屏幕宽度小于1550px')
} else {
console.log('屏幕宽度大于1550px')
}
},
immediate: true
},
}
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
