徒然畑

徒然なるままに。

【日々学ぶVue】クラスの切り替えをcopmutedで監視する

f:id:mio_U_M:20180603142226j:plain

※2018.6.5 内容更新しました

どうもです。新居が引きこもりやすくて最高です。

久しぶりにVueについてのメモです。 今回はVueでよくお世話になってるクラスバインディングについてのメモです。

Vueではクラスの切り替えが簡単に行えます

jp.vuejs.org

この公式ドキュメントにもあるように、v-bind:classを要素にくっつければ、dataの値次第でクラスを付け替えたりすることもできます。 また、dataのみならずcomputedを使用してクラス切り替えを管理することも可能です。 どうやってやるねん?という方はこの記事を一緒に見るとわかりやすいかもです。

phiary.me

※察しの言い方は公式ドキュメントだけで十分かもしれませんが、個人的には公式ドキュメントだけじゃわからないことがあるので。。。一応あげさせてもらいました。

クラスの切り替えを値に応じて変更させたい?それもできます。

で、今回はcomputedを用いてクラスを付け替える場合の具体例。

開発の中で、要素に割り振ったidだったりカスタムデータ属性だったりをみて そこに記載されてる値に応じてクラス切り替える、的なことをやりたい!と思って公式リファレンスを眺めていたらそれっぽい記述があったので 一回書いてみないと理解できないな。。。と感じてサンプル作りました。

codepen.io

フォーム要素の中に0や-を入れるとスタイルが変化します(複数値入力も可能になってます)。 jsとタグの中身をみて見るとこんな感じ

HTML側

JS側

スタイルバインディングという形でdata属性に持たせてやる、という方法もあり得ますが 例えばクラスを当てる対象の要素の中身がユーザーの入力によって動的に切り替わるとかであれば 上のサンプルのようにcomputedで判定を持たせてくるくる切り替える方法もありです。