動的に反応させることをVueではディレクティブと言います。
classのディレクティブの書き方は以下です。
<div :class="{'is-active': isActive}"></div>
is-activeがクラス名、isActiveが変数です。
複数の聞き方
<div :class="{'is-active': isActive, 'is-close': isClose }"></div>
,コロンで区切ればOKです。
三項演算子
三項演算子の場合は、変数のところを式にすればOKです。
<div :class="{'is-active': isActive === true }"></div>
以上を踏まえて、クリックしたら.is-activeというクラスを付与、.is-closeというクラスを削除してみます。
コメント