vue3 通过变量的值,来动态的进行class的赋值

1、需求:不同的设备因为宽度不一样,所以要做一些调整,但是通过tailwindcss的设置并不能满足我们的条件:

现在手机的屏幕大小也很大,设置了xl,发现电脑动,手机也在动,一样的效果。

2、通过上一篇的自定义isMobile来进行设置即可:

const isMobile = computed(() => checkDevice()
const checkDevice = () => {
    return  navigator.userAgent.match(
      /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i,
    );
  };

3、template中我们这么写:

:class="{ '-ml-10 p-2': isMobile }"

语法:

:class = "" 中间是一个对象:{ '-ml-10 p-2': isMobile },其中:前面是className,后面是表达式,可以有多个。

多个变量以数组展示:

:class="[{ '-ml-10 p-2': isMobile },{ 'ml-10 p-2': isMobile2 }]"

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/935345.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【开源】基于SpringBoot框架的在线视频教育平台 (计算机毕业设计)+万字毕业论文 T027

系统合集跳转 源码获取链接 一、系统环境 运行环境: 最好是java jdk 1.8,我们在这个平台上运行的。其他版本理论上也可以。 IDE环境: Eclipse,Myeclipse,IDEA或者Spring Tool Suite都可以 tomcat环境: Tomcat 7.x,8.x,9.x版本均可 操作系统…

导游现场面试需要注意的问题

今天给大家带来一些导游现场面试需要注意的问题,大部分的城市导游考试已经考完了,但是还有一些城市的十二月份才考,有需要的朋友们赶紧来看,有备无患。 01、做好充足准备 认真准备做好每个景点的讲解介绍,不要抱有侥幸…

牛客刷题(总结)

目录 <1> <2> 思路 <1> 给你 4 个整数 a,b,c,d&#xff0c;你需要回答 是奇数还是偶数。 #include<stdio.h> #define int long long int f(int a) {if(a%20){return 0;}else{return 1;}} signed main() {int a,b,c,d;scanf("%lld %lld %lld %ll…

AI智算-k8s部署大语言模型管理工具Ollama

文章目录 简介k8s部署OllamaOpen WebUI访问Open-WebUI 简介 Github&#xff1a;https://github.com/ollama/ollama 官网&#xff1a;https://ollama.com/ API&#xff1a;https://github.com/ollama/ollama/blob/main/docs/api.md Ollama 是一个基于 Go 语言开发的可以本地运…

Arduino: Arduino IDE安装

目录 1.1 Arduino软件下载与安装 1.2 esp32_arduino的开发库安装 1.3 手动安装板支持包 1.1 Arduino软件下载与安装 Arduino官网下载地址&#xff1a;https://www.arduino.cc/en/software。 1.2 esp32_arduino的开发库安装 接下来安装esp32_arduino的开发库。 1.2.1 在线安…

《Hadoop大数据技术应用综合训练》----以NBA冠军球队计数为例

一、综合训练要求 案例中需要处理的文件为nba.csv,该文件记录了NBA历年总冠军的详细情况,文件的字段从左到右依次为比赛年份、具体日期、冠军、比分、亚军和当年MVP(联盟MVP是Most Valuable Player缩写,即最有价值球员),每个字段以半角逗号“,”进行分割,如图1所示。 图…

智能人体安全防护:3D 视觉技术原理、系统架构与代码实现剖析

随着工业化程度的提高&#xff0c;生产安全已成为企业关注的重点。尤其是在一些存在禁区的工业厂区和车间&#xff0c;人员误入或违规进入将带来严重的安全隐患。为了解决这一问题&#xff0c;迈尔微视推出了智能人体安全检测解决方案&#xff0c;为企业提供全方位的人员安全监…

使用html 和javascript 实现微信界面功能2

1.功能说明&#xff1a; 对上一篇的基础上进行了稍稍改造 主要修改点&#xff1a; 搜索功能: 在搜索框后面增加了搜索按钮。 搜索按钮调用performSearch函数来执行搜索操作。 表单形式的功能: 上传文件: 修改为表单形式&#xff0c;允许用户通过文件输入控件选择文件并上传。 …

vulhub复现CVE-2021-44228log4j漏洞

目录 一&#xff1a;漏洞概述 二&#xff1a;漏洞原理 三&#xff1a;漏洞利用 lookup功能&#xff1a; JNDI解析器&#xff1a; ldap服务&#xff1a; RMI&#xff1a; 四&#xff1a;漏洞复现 4.1靶场 4.2dnslog测试 4.3部署jndi-injection-exploit 4.4打开监听端口 4.5触发请…

数据库中的运算符

1.算术运算符 算术运算符主要用于数学运算&#xff0c;其可以连接运算符前后的两个数值或表达式&#xff0c;对数值或表达式进行加&#xff08;&#xff09;、减&#xff08;-&#xff09;、乘&#xff08;*&#xff09;、除&#xff08;/&#xff09;和取模&#xff08;%&…

Java项目实战II基于Java+Spring Boot+MySQL的社区帮扶对象管理系统的设计与实现(开发文档+数据库+源码)

目录 一、前言 二、技术介绍 三、系统实现 四、核心代码 五、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 在当前社会&#xff0c;随…

计算机的运维成本计算:运算的任务比例(电能消耗);机器成本C和服务率

计算机的运维成本计算&#xff1a;运算的任务比例&#xff08;电能消耗&#xff09;&#xff1b;机器成本C和服务率 “cost”指的是服务器的运维成本&#xff08;cost of operation and maintenance&#xff09;。提出的模型中&#xff0c;考虑了服务器运维成本以及平均队列等…

MSN文章精选2

大明灭亡时&#xff0c;数万名锦衣卫为何都消失不见&#xff0c;他们都去了哪里&#xff1f; (msn.cn)https://www.msn.cn/zh-cn/news/other/%E5%A4%A7%E6%98%8E%E7%81%AD%E4%BA%A1%E6%97%B6-%E6%95%B0%E4%B8%87%E5%90%8D%E9%94%A6%E8%A1%A3%E5%8D%AB%E4%B8%BA%E4%BD%95%E9%83%…

暴雨首发 Turin平台服务器亮相中国解决方案AMD峰会巡展

近期&#xff0c;AMD中国解决方案峰会分别在北京和深圳圆满落幕。作为AMD的战略合作伙伴&#xff0c;暴雨信息发展有限公司&#xff08;以下简称“暴雨”&#xff09;一直积极研发基于AMD芯片的产品&#xff0c;并在本次巡展上首次发布展出了最新的Turin平台的AI服务器产品算力…

算法日记48 day 图论(拓扑排序,dijkstra)

今天继续图论章节&#xff0c;主要是拓扑排序和dijkstra算法。 还是举例说明。 题目&#xff1a;软件构建 117. 软件构建 (kamacoder.com) 题目描述 某个大型软件项目的构建系统拥有 N 个文件&#xff0c;文件编号从 0 到 N - 1&#xff0c;在这些文件中&#xff0c;某些文件…

vue-echarts高度缩小时autoresize失效

背景 项目中采用动态给x-vue-echarts style赋值width&#xff0c;height的方式实现echarts图表尺寸的改变 <v-chart...autoresize></v-chart>给v-chart添加autoresize后&#xff0c;在图表宽度变化&#xff0c;高度增加时无异常&#xff0c;高度减小时图表并未缩…

40 list类 模拟实现

目录 一、list类简介 &#xff08;一&#xff09;概念 &#xff08;二&#xff09;list与string和vector的区别 二、list类使用 &#xff08;一&#xff09;构造函数 &#xff08;二&#xff09;迭代器 &#xff08;三&#xff09;list capacity &#xff08;四&#x…

vue3监听横向滚动条的位置;鼠标滚轮滑动控制滚动条滚动;监听滚动条到顶端

1.横向取值scrollLeft 竖向取值scrollTop 2.可以监听到最左最右侧 3.鼠标滚轮滑动控制滚动条滚动 效果 <template><div><div class"scrollable" ref"scrollableRef"><!-- 内容 --><div style"width: 2000px; height: 100…

【大模型】ChatGPT 创作各类高质量文案使用详解

目录 一、前言 二、ChatGPT文案创作的优势 三、ChatGPT 各类文案创作操作实战 3.1 ChatGPT创作产品文案 3.1.1 ChatGPT创作产品文案基本思路 3.1.2 ChatGPT 创作产品文案案例一 3.1.2.1 操作过程 3.1.3 ChatGPT 创作产品文案案例二 3.2 ChatGPT 创作视频脚本 3.2.1 Ch…