ログイン
問題3

クラス操作をしてみよう!

アイコン画像

問題3:クラス操作をしてみよう!

v-bindというものを使ってクラスの付け外しをして
Styleを変更してみよう!

エディターのアイコンあらかじめエディタに書くコード

                <div id="app">
  <div v-bind:class="{active: isActive}">
      Active!!
  </div>
</div>
<style>
  .active {
    width: 30%;
    margin: 30% auto;
    padding: 1rem;
    background:#40B983;
    color: #ffffff;
    text-align: center;
    box-shadow: 6px 6px #ddd;
  }
</style>
¥Vue¥
              

ブラウザのアイコン期待する画面


タグアイコン解答ソースコード

              <script>
  var app = new Vue ({
    el: "#app",
    data: {
      isActive: true
    }
  })
</script>
¥Vue¥
            

コメントのアイコン解説

Vueではv-bindでクラスのつけ外しができるようになる。
ここでは、'isActive'がtrueであれば'active'というクラスが有効になりスタイルが適用され、falseとすれば、
無効になる。この仕組みはよく使うから覚えておいて欲しい。
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする
Vueを学ぶなら現役エンジニア監修「甲賀コース」
LINEの友達追加でお役立ち動画をGET!!

閉じる