仅在移动设备上添加类-Vue.js和Bootstrap

Question

我只想在移动设备上添加课程。我在使用vuetify之前已经做到了，但是使用vue似乎更困难：

码：

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

在vuetify中，您可以$vuetify.breakpoint.xs使用bootstrap获得类似的效果？或者，请推荐其他方法。

Answer 1

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

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

并像这样组合：

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

请确保您阅读了vuetify文档中的断点以了解更多信息。

但是，据我所知，引导程序的唯一方法是使用媒体查询：

// Small devices 
@media (max-width: 760px) { 
  //Add your style here
 }

不过，有一个与引导程序无关的解决方案：

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>