免费 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
},
}
相关内容
热门资讯
菲尔兹奖得主王虹4岁不慎烫伤，...
中国数学家王虹、邓煜获得菲尔兹奖，这是中国籍数学家首次获得这一奖项。王虹1991年出生在广西桂林平乐...
美媒：特朗普下令暂停空袭伊朗
美国“Axios”新闻网7月25日援引知情人士报道，特朗普24日指示美军不得对伊朗发动新的打击，打破...
法国野火“创历史纪录”：政坛吵...
综合法媒BFM新闻台、《费加罗报》报道，当地时间7月25日中午，内政部长努内兹（Laurent Nu...
51.79亿，携程真的疼了吗？
2026年7月25日，市场监管总局对携程反垄断案作出行政处罚：罚没款合计51.79亿元。但这个数字被...
一艘越南籍渔船在南沙遇险，29...
新华社三沙7月25日电（记者赵颖全）记者从三沙海上搜救中心获悉，25日傍晚，一艘越南籍渔船在南沙永暑...
成都如何耕好新型工业化“试验田...
7月24日，APEC数字周城市侧配套活动——制造强国建设专家研讨暨新型工业化推进交流会举行，院士专家...
活力中国调研行丨检测设备“长腿...
从排放控制的细分龙头到智能装备的新入局者，凯龙高科的转型路径，为观察传统制造业如何切入新赛道提供了一...
原创 别...
别被顶级奖项光环忽悠透了！拿菲尔兹奖的王虹，道出基础科研最现实的人间落差 开篇：大众脑补的名利双收，...
温州划龙桥惠耳——如何应对老年...
年近古稀的老人，近来时常出现耳鸣。周日，孩子们来了，跟她说话，声音小了她听不清，声音大了她嫌吵得慌，...
民调：包括共和党人在内，美国人...
据美国有线电视新闻网（CNN）当地时间24日报道，多项最新民调结果显示，包括许多共和党人在内，美国民...