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 }]"
相关推荐
猩兵哥哥8 小时前
前端面向对象设计原则运用 - 策略模式
前端·javascript·vue.js
EMT10 小时前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
我是日安10 小时前
从零到一打造 Vue3 响应式系统 Day 9 - Effect:调度器实现与应用
前端·vue.js
鹏多多10 小时前
深入解析vue的keep-alive缓存机制
前端·javascript·vue.js
用户51681661458411 天前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端缘梦1 天前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
Simon_He1 天前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown
王同学QaQ1 天前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
华仔啊1 天前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
艾小码1 天前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js