免费 cdn,vue如何监听屏幕尺寸变化
创始人
2024-12-27 15:02:31
0次
在vue中监听屏幕尺寸变化的方法：1.新建项目，引入vue；2.定义data值，记录屏幕尺寸；3.使用window.onresize方法获取屏幕尺寸；4.使用watch方法实时监听屏幕尺寸；
具体步骤如下：
1.首先，新建一个html项目，并在项目中引入vue；
import Vue from \'vue\'
2.引入vue后，在项目中使用data定义一个值，用于记录屏幕尺寸；
data(){
return{
screenWidth: null,
}
}
3.data值定义好后，使用window.onresize方法获取屏幕尺寸；
mounted () {
this.screenWidth = document.body.clientWidth
window.onresize = () => {
return (() => {
this.screenWidth = document.body.clientWidth
})()
}
}
4.最后，获取到屏幕尺寸后，使用watch方法即可实时监听屏幕尺寸；
watch: {
screenWidth: {
handler: function (val, oldVal) {
if (val < 1550) {
console.log(\'屏幕宽度小于1550px\')
} else {
console.log(\'屏幕宽度大于1550px\')
}
},
immediate: true
},
}
相关内容
热门资讯
男生北大退学又考上清华被疑“挤...
[男生具体姓名]曾从北大退学，后又考上清华，这一经历引发了“挤占名额”的质疑。他本人回应称，自己退学...
伊朗外交部：美国已开始“对伊朗...
伊朗外交部明确指出，美国已开启“对伊朗发动危险的战争”。这一表态彰显了伊朗对于美国行径的强烈谴责与警...
钓一条鱼最高奖30万？这5人把...
在某一钓场，竟出现令人震惊的现象。钓一条鱼最高可奖 30 万，如此高额的奖励吸引了众多垂钓者。然而，...
英空军基地两架军机被巴勒斯坦支...
近日，英国某空军基地的两架军机遭遇了令人震惊的一幕。巴勒斯坦支持者使用喷漆对其进行了破坏，这一行为引...
以总理称儿子婚礼因伊以冲突被推...
某总理曾称其儿子的婚礼因伊以冲突而被推迟，随后还抱怨自身遭遇了“个人损失”。这一言论引发了广泛关注与...
“苏超现象”引发多地深思：怎样...
“苏超现象”引发多地深思：怎样踢出文体旅融合的“好球”？苏超赛事的成功，彰显了文体旅融合的巨大潜力。...
赖清德邀蓝白参与“安全简报”，...
赖清德邀蓝白参与“安全简报”，此举动引发广泛关注。朱立伦明确表态不出席，彰显其在两岸问题上的坚定立场...
美国大规模向中东调兵遣将，会下...
美国大规模向中东调兵遣将，其意图令人担忧。中东地区本就局势动荡，美国的这一动作无疑加剧了紧张氛围。从...
管涛：极限关税下的中美贸易
管涛在探讨极限关税下的中美贸易时指出，极限关税这一举措给中美贸易带来了巨大冲击。一方面，高关税导致双...
明尼苏达州两名州议员遭枪击，特...
近日，明尼苏达州发生了令人震惊的一幕，两名州议员遭枪击。这一突发暴力事件引发了广泛关注和社会的不安。...