Vue.js 仅在mobile-Vuejs和引导上添加类

我只想在手机上添加一个类。在使用vuetify之前，我已经这样做了，但是使用vue似乎更困难：

代码：

<div class="{'mobileSnackBar': breakpoint.xs}">
  <p> This is my snackbar </p>
</div>

这是我的小吃吧

---

在vuetify中有

$vuetify.breakpoint.xs

，但是如何使用引导程序获得类似的效果？或者请推荐一个替代方案。

使用vuetify，您可以执行以下操作：

computed: {
    is_screen_small() {
        return this.$vuetify.breakpoint.smOnly
    },
}

然后像这样组合：

<div class="{'mobileSnackBar': is_screen_small}">
  <p> This is my snackbar </p>
</div>

不过，有一种解决方案与引导无关：

computed: {
  is_mobile() {
    const isMobile = window.matchMedia("only screen and (max-width: 760px)")
    return isMobile.matches ? true : false
  }
}

并将其组合为：

<div class="{'mobileSnackBar': is_mobile}">
  <p> This is my snackbar </p>
</div>

这是我的小吃吧

引导的另一种方法是使用断点类来显示/隐藏元素，如下所示：

<div class="mobileSnackBar d-sm-none">
   <p> This is my snackbar </p>
</div>
<div class="d-none d-sm-block">
   <p> This is my snackbar </p>
</div>

这是我的小吃吧

这是我的小吃吧

---

组件比html更有意义，甚至可能不是最干净的解决方案，但它确实有效。

为什么不使用CSS mediaquery？因为使用vuetify，这种方法更干净。因此，我正在寻找一种类似的替代方法，滥用JS，因为CSS的工作自然不会“更干净”。事实正好相反。您是否有尝试过的Vue代码段？不幸的是，根据屏幕大小无法保证您使用的是触摸式移动设备。如果你把你的桌面屏幕缩得足够小，它会认为它是移动的。因此，您需要小心一点，特别是如果您需要捕获鼠标事件，如mouseover或mouseleave。此外，一些个人电脑现在有触摸屏，所以鼠标和触摸事件都可以触发。。。这有点像雷区。

<div class="mobileSnackBar d-sm-none">
   <p> This is my snackbar </p>
</div>
<div class="d-none d-sm-block">
   <p> This is my snackbar </p>
</div>