直接上代码,最直观了
//初始化
data(){
return{
isMobile: false,
}
}
created(){
window.addEventListener('resize', this.checkMobile);
this.checkMobile(); // 初始化时进行一次判断
}
destroyed() {
window.removeEventListener('resize', this.checkMobile);
},
methods: {
checkMobile() {
this.isMobile = window.innerWidth <= 767;
console.log(this.isMobile)
}
},
手机端isMobile是true否则就是false
vue 引用方法为:
<div v-if="isMobile">手机端</div>
<div v-else>非手机端</div>