vue基础-vue监听当前屏幕大小做不同的操作
文章目录
- 前言
- 一、代码如下:
- 总结
前言
在vue项目开发过程中,有个需求,就是当屏幕大于1024时,我们默认为PC模式。小于1024时,我们默认为H5模式。但是有的界面我们想在PC和H5上面展示不同的数据,请求不同的接口,而且要动态改变,就是屏幕缩小的时候做出改变。
下面介绍监听当前屏幕的宽度,动态请求数据更改数据。
一、代码如下:
const contentData = ref('')// 使用响应式
const state = reactive({screenWidth: window?.innerWidth,
})
// 用来判断不用多次加载
const isLoading = ref(false)const requestData = async () => {try {// 根据PC判断const isPc = window?.innerWidth >= 1024let tabId = import.meta.env.WEB_IDif (isPc)tabId = import.meta.env.PC_IDconst result = await apis.getxxxxxInfo(tabId)if (result && result.data && result.data.content)contentData.value = result.data.content}catch (error) {console.error(error)}
}onMounted(() => {// 第一次加载数据requestData()// 增加window监听window.addEventListener('resize', () => {state.screenWidth = window?.innerWidth})
})// 监听某个值
watchEffect(() => {if (state.screenWidth >= 1024) {if (isLoading.value)returnisLoading.value = truerequestData()}else {if (!isLoading.value)returnisLoading.value = falserequestData()}
}
总结
这就是vue监听当前屏幕大小做不同的操作,希望帮助到你。
相关文章:
vue基础-vue监听当前屏幕大小做不同的操作
文章目录 前言一、代码如下:总结 前言 在vue项目开发过程中,有个需求,就是当屏幕大于1024时,我们默认为PC模式。小于1024时,我们默认为H5模式。但是有的界面我们想在PC和H5上面展示不同的数据,请求不同的接…...
Unity框架学习--3
单例模式基类 构造函数私有化,防止外部创建对象 提供一个属性给外部访问,这个属性就相当于是这个类的唯一对象 分为懒汉模式和饿汉模式 不继承MonoBehaviour的单例模式 public static MyUiManager Instance {get{if (instance null){instance new …...
ARMday2
.text .global _start _start:mov r0,#0x1mov r1,#0x0sum:cmp r0,#0x64bhi stopaddls r1,r1,r0addls r0,r0,#0x1bls sumstop:b stop .end...
IntelliJ IDEA和Android studio怎么去掉usage和作者提示
截止到目前我已经写了 600多道算法题,其中部分已经整理成了pdf文档,目前总共有1000多页(并且还会不断的增加),大家可以免费下载 下载链接:https://pan.baidu.com/s/1hjwK0ZeRxYGB8lIkbKuQgQ 提取码…...
ssm营业厅宽带系统源码和论文
ssm简易版营业厅宽带系统源码和论文018 开发工具:idea 数据库mysql5.7 数据库链接工具:navcat,小海豚等 技术:ssm 摘 要 现代经济快节奏发展以及不断完善升级的信息化技术,让传统数据信息的管理升级为软件存储,…...
CSS:background 复合属性详解(用法 + 例子 + 效果)
目录 background 复合属性background-color 背景颜色(纯)background-image 背景图片 或者 渐变颜色background-repeat 背景是否重复background-size 设置图片大小background-position 设置背景图片显示位置background-attachment 设置背景图片是否随页面…...
django中实现事务/django实现悲观锁乐观锁案例
django中实现事务的几种方式 # 1 全局开启事务---> 全局开启事务,绑定的是http请求响应整个过程DATABASES {default: {#全局开启事务,绑定的是http请求响应整个过程ATOMIC_REQUESTS: True, }}from django.db import transaction# 局部禁用事务trans…...
自动驾驶技术:改变交通出行的未来
自动驾驶技术,这个让人充满期待的技术,正在改变我们的交通方式,带来一种全新的出行体验。它可以让汽车、无人机等交通工具像人类驾驶一样自主行驶,通过人工智能、视觉计算、雷达、监控装置和全球定位系统协同合作,实现…...
5.利用matlab完成 符号矩阵的转置和 符号方阵的幂运算(matlab程序)
1.简述 Matlab符号运算中的矩阵转置 转置向量或矩阵 B A. B transpose(A) 说明 B A. 返回 A 的非共轭转置,即每个元素的行和列索引都会互换。如果 A 包含复数元素,则 A. 不会影响虚部符号。例如,如果 A(3,2) 是 12i 且 B A.࿰…...
为什么要自动化Web测试?
Web自动化是更快地实现所需结果的较佳方式。自动化测试在市场上引起了巨大的轰动。此软件测试过程可以让您使用正确的自动化测试工具和技术集自动执行测试过程。我们执行它是为了检查软件应用程序是否具有完全按照我们希望它执行的方式执行的勇气。 比以往更快地获得反馈 自动化…...
Spark_RDD的容错机制_数据丢失恢复
我们都知道Spark是弹性分布式数据集,数据会存储在多台机器上,那么如何确保在分布式数据计算中,数据不丢失就是其中的关键的部分。本文主要讲解一下Spark中的容错机制。 Spark 主要提供了3个层面的数据容错机制。分别是 调度层,RDD…...
VB+SQL期刊信息管理系统设计与实现
摘 要 本次毕业设计课题为“期刊信息管理系统”,该系统在正常运营中总是面对大量的读者信息、期刊信息以及两者相互作用产生的借刊信息,还刊信息。因此需要对读者资源、期刊资源、借刊信息、还刊信息进行管理,及时了解各个环节中信息的变更,有利于提高管理效率。 此次毕…...
如何在iPhone手机上修改手机定位和模拟导航?
如何在iPhone手机上修改手机定位和模拟导航? English 首先,你需要在Mac电脑上下载安装 Location Simulator/定位模拟工具 和 Runner 这两款应用程序。 完成安装后,打开软件,并用USB连接手机设备 修改iPhone手机定位和模拟导航 …...
Linux 当fork在for循环中的问题
以下代码会打印几个"A"? 例1.代码如下: int main(int argc, char* argv[],char* envp[]) { for(int i 0;i < 2; i ) { fork(); printf("A\n"); } exit(0); } 代码分析: //父进程for(int i …...
推断统计中非参数检验之卡方检验、列联表分析和游程检验
一、(卡方检验):赛马比赛的赛道会影响成绩吗 这里以一个实例赛马比赛的赛道是否会影响成绩为例,实际就是检验获胜频数与期望频数之间有无显著性差异。 import pandas as pdstep1 调用包 from scipy.stats import chisquare impor…...
AI社交来了,百度、Soul“双向奔赴”
随着科技的飞速进步和迅猛发展,AI技术已经开始渗透到教育、工作、社交、娱乐和健康多个领域,并为人们生活中的多个场景带来了诸多的创新和可能性。甚至可以说,AI技术已经深刻地介入到了我们日常生活的方方面面,让我们的生活方式发…...
【【verilog 典型电路设计之加法器树乘法器】】
verilog 典型电路设计之加法器树乘法器 加法器树乘法器 加法器树乘法器的设计思想是“移位后加”,并且加法运算采用加法器树的形式。乘法运算的过程是,被乘数与乘数的每一位相乘并且乘以相应的权值,最后将所得的结果相加,便得到了…...
选择最适合自己的NIO, 一探流技术
目录 一、Channel1、FileChannel代码示例2、DatagramChannel代码示例3、SocketChannel 和 ServerSocketChannel代码示例 二、Buffer1、ByteBuffer示例代码2、CharBuffer示例代码3、ShortBuffer、IntBuffer、LongBuffer、FloatBuffer、DoubleBuffer 等示例代码 三、Selector1、S…...
智能家居(3)---socket网络控制线程封装
封装socket网络线程实现对智能家居中各种灯光的控制 main.Pro(主函数) #include <stdio.h> #include "controlDevice.h" #include "inputCommand.h" #include <pthread.h>struct Devices *pdeviceHead NULL; //设备工厂链表…...
ubuntu 安装 emscripten 时 install latest 安装报错问题
学习官网参考:Compiling a New C/C Module to WebAssembly - WebAssembly | MDN (mozilla.org) 报错信息 形如: Error: Downloading URL https://storage.googleapis.com/webassembly/emscripten-releases-builds/linux/b90507fcf011da61bacfca613569…...
谷歌浏览器插件
项目中有时候会用到插件 sync-cookie-extension1.0.0:开发环境同步测试 cookie 至 localhost,便于本地请求服务携带 cookie 参考地址:https://juejin.cn/post/7139354571712757767 里面有源码下载下来,加在到扩展即可使用FeHelp…...
AI Agent与Agentic AI:原理、应用、挑战与未来展望
文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例:使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例:使用OpenAI GPT-3进…...
【算法训练营Day07】字符串part1
文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接:344. 反转字符串 双指针法,两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...
大学生职业发展与就业创业指导教学评价
这里是引用 作为软工2203/2204班的学生,我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要,而您认真负责的教学态度,让课程的每一部分都充满了实用价值。 尤其让我…...
全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec? IPsec VPN 5.1 IPsec传输模式(Transport Mode) 5.2 IPsec隧道模式(Tunne…...
selenium学习实战【Python爬虫】
selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...
如何在最短时间内提升打ctf(web)的水平?
刚刚刷完2遍 bugku 的 web 题,前来答题。 每个人对刷题理解是不同,有的人是看了writeup就等于刷了,有的人是收藏了writeup就等于刷了,有的人是跟着writeup做了一遍就等于刷了,还有的人是独立思考做了一遍就等于刷了。…...
dify打造数据可视化图表
一、概述 在日常工作和学习中,我们经常需要和数据打交道。无论是分析报告、项目展示,还是简单的数据洞察,一个清晰直观的图表,往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server,由蚂蚁集团 AntV 团队…...
Springboot社区养老保险系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,社区养老保险系统小程序被用户普遍使用,为方…...
算法:模拟
1.替换所有的问号 1576. 替换所有的问号 - 力扣(LeetCode) 遍历字符串:通过外层循环逐一检查每个字符。遇到 ? 时处理: 内层循环遍历小写字母(a 到 z)。对每个字母检查是否满足: 与…...
