問題
3
Vue.js
クラス操作をしてみよう!
Vue.jsの問題に挑戦しよう！
問題
「クラス操作をしてみよう!」
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が届きます
Vueではv-bindでクラスのつけ外しができるようになる。
ここでは、'isActive'がtrueであれば'active'というクラスが有効になりスタイルが適用され、falseとすれば、
無効になる。この仕組みはよく使うから覚えておいて欲しい。
