Vueでclassを動的に切り替えたい【複数、三項演算子】

動的に反応させることを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というクラスを削除してみます。

 

See the Pen
Untitled
by funclur (@funclur)
on CodePen.

コメント

タイトルとURLをコピーしました