Help us understand the problem. What is going on with this article?

Vue.jsで画面サイズによってClassやidを付与したい

どんだけ探しても画面サイズの取得とクラスの付与に関する記事はあるが、なぜかタイトルの記事が無かったから書く

今回やりたいのは画面サイズが800px以下になった時にクラスを付与したい。ってだけ
だからv-ifを使ってコンテンツ非表示とは少し違う。

クラスを付与したいHTML

Test.vue
<!-- ここに800px以下になったら hoge というクラスを付与したい -->
<div>
    <p>これはテストです。</p>
</div>

ぱぱっとコードを先に置いておく

Test.vue
<div v-bind:class="{active:hoge}">
    <p>これはテストです。</p>
</div>

<script>
    export default {
        data() {
            return {
                hoge: {}
            }
        }
    },
    methods: {
        handleResize: function() {
            if (window.innerWidth <= 800) {
                this.hoge = true
            } else {
                this.hoge = false
            }
        }
    },
    created() {
        window.addEventListener('resize', this.handleResize)
        this.handleResize()
        },
    destroyed() {
        window.removeEventListener('resize', this.handleResize)
    }
</script>

クラス付与する部分の説明

ここでv-bindに与えたDOM要素が真の場合ならクラスにhogeが付与されます。

Test.vue
<div v-bind:class="{active:hoge}">
    <p>これはテストです。</p>
</div>

画面サイズによってクラスを付与する処理の説明

ここのメソッドでhandleResizeという関数を作成しています。

window.innerWidthには画面幅サイズが入っているので、それが800px以下ならという分岐をしています。

真ならhogetrueを与えて偽ならhogefalseを与えます。

Test.vue
<script>
    methods: {
        handleResize: function() {
            if (window.innerWidth <= 800) {
                this.hoge = true
            } else {
                this.hoge = false
            }
        }
    }
</script>

画面サイズが変わる毎にイベントを実行したり削除したり

created()でhandleResizeをイベントを実行、destroyedでイベントを削除

Test.vue
<script>
    created() {
        window.addEventListener('resize', this.handleResize)
        this.handleResize()
        },
    destroyed() {
        window.removeEventListener('resize', this.handleResize)
    }
</script>

こうすれば画面サイズが800px以下になった時にhogeというクラスが付与されて、逆に800px以上になった時はクラスが無くなります。

ただもっとスマートなやり方があるはず。。こうした方が良いって意見がある方はコメントお願いします( ◠‿◠ )

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした