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 }]"
原文地址：https://blog.csdn.net/jwbabc/article/details/144434972
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！