Written by Kasumi

【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要素のクラスを切り替える方法について紹介しました。

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

関連記事

Vue.js

Vue.jsでfadeIn、fadeOutするアニメーションを実装する方法

2022.09.22
82
Vue.js

Vue.jsでタブ切り替えを実装する方法【簡単】

2022.09.03
134
Vue.js

Vue.jsで指定回数、html要素をループ処理させる方法【v-forディレクティブを使おう】

2022.09.13
97
Vue.js

Vue.jsでページ内トップへ戻るボタンを設置する方法

2022.09.18
89