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

【Vue初心者向け】シンプルなクラスバイディングのサンプルコード

クラスを動的に切り替えたい時にはクラスバイディング

例えば、クラスをつけたり外したり、変えたりしたいことがあります。
そんな時はクラスバイディングを利用すると簡単に実装できます。
ドキュメント:クラスとスタイルのバインディング

上記の公式のドキュメントの通りですが、実際の動作とコードを合わせて確認した方がわかりやすいと思いますので、以下サイトで実際の動作とサンプルコードを確認できるようになっています。

クラスのバインディングのサンプルコード

このサンプルコードではわかりやすく、ボタンを押すと、「active」の真偽値が変化し、クラスをつけたり外したりします。それによりactiveクラスが付いている時はCSSが効いて文字が赤くなります。

コード

<template>
    <div class="class-binding">
        <div :class="{ active: isActive }">文字の色が変わります!</div>
        <button @click="changeActive">色をチェンジ</button>
    </div>
</template>

<script>
export default {
    data(){
        return{
            isActive: true
        }
    },
    methods:{
        changeActive(){
            this.isActive = !this.isActive
        }
    }
}
</script>

<style scoped>
.active{
    color: red;
}
</style>

宣伝:ブログ書いてます。→ブログ

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
ユーザーは見つかりませんでした