問題

3
Vue

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

Vueの問題に挑戦しよう!

問題

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

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¥
                

期待する画面

解答と解説

解説

LINE登録して解答を見る

※ご登録後すぐに解答閲覧用URLが
LINEで届きます

Vueではv-bindでクラスのつけ外しができるようになる。
ここでは、'isActive'がtrueであれば'active'というクラスが有効になりスタイルが適用され、falseとすれば、
無効になる。この仕組みはよく使うから覚えておいて欲しい。

さらにスキルアップしたい方は公式LINEから「Vue」と送信すると動画が見れます。

LINE登録して動画を視聴する
今なら豪華5大特典もらえる! LINE登録でGET