• Vue.js

【Vue.js】デバイス幅によってクラスを切り替える方法

vue.jsでデバイス幅（PC・タブレット・スマホなど）によってHTML要素のクラスを切り替える（追加・削除）方法について知りたい。

本記事ではのような悩みを解決。

windowの可変を検知し、デバイス幅によってクラスを切り替える方法について解説します。

HTML

<div id="app">
  <div v-bind:class="{active}">
    <p>
      767px以下のデバイス幅でactiveクラスを付与
    </p>
  </div>
</div>

まずは該当するHTML要素にv-bind:class属性を付与します。

属性値にデバイス幅によって切り替えたいクラス名を入れます。

Vue.js

const app = Vue.createApp({
  data() {
    return {
      active: {}
    }
  },
  methods: {
    Resize: function () {
      // 767px以下のデバイス幅で実行したい処理
      if (window.innerWidth <= 767) {
        this.active = true
      // それ以外のデバイス幅で実行したい処理
      } else {
        this.active = false
      }
    }
  },
  created() {
    window.addEventListener('resize', this.Resize);
    this.Resize();
  },
  destroyed() {
    window.removeEventListener('resize', this.Resize);
  }
});
app.mount("#app");

デバイス幅によってクラスを切り替えるコード例です。

activeクラスが767px以下で追加され、767px以上で削除されます。

データメソッドに前章で設定した属性値を定義。

methodsオプションでResizeメソッド（メソッド名は任意）を定義

メソッド内でif・else文を定義。

window.innerWidth（現在表示してるデバイス幅）が任意の指定サイズ（px）より以上・以下かを比較演算子を使って条件分岐します。

条件内でデータメソッドで定義したactiveの真偽値を設定。

trueでクラスを追加・falseで削除します。

addEventListener・removeEventListenerメソッドを定義。

引数にresizeを指定する事で、ウィンドウサイズが可変されたかを検知します。

上記を検知したら、メソッドを実行もしくは削除します。

以上で実装完了です。

まとめ

vue.jsでデバイス幅（PC・タブレット・スマホなど）によってHTML要素のクラスを切り替える方法について紹介しました。

以上で解説を終わります。