Vueのバインディングでスタイルを変えたかった話

Vue.js

はじめに

開発している中で、「公開、非公開などのステータスの値によってCSSで背景の色を変えたい」ということがありました。
活性・非活性でSCCを変化させるやり方はわかるのですが
公開前, 公開中, 公開終了, 非公開という4つのステータスによってCSSを変化させるのはどうやるのだろうか、、、、
ということで記事にしていきます。

基本から

まず、活性・非活性でCSSを変えるのはこうでした。

template

script

style

isActivetrueのときは .activeが反映され、
falseのときは :not(.active)が反映されます。

挑戦

よし、同じようにやってみよう💪🏻

まずやったこと

statusの値

template

script

style

と書いてみたのですが、
コメントアウト箇所の処理をどうすれば良いのかわかりませんでした。

次の挑戦

template

script

これだと、クラスをどう結びつけるのかわかりませんでした。

出会った

う〜〜〜〜〜〜〜〜〜んと頭を抱えているときに出会った
3項演算子を使ったクラスバインディングを配列構文で書き換える

できそう💪🏻

template

できた!!!!!!!!!!!!!!!!!!!!!!!!!!

test.jpg 10%

さいごに

filtersを使えばよかったっぽい

template

script

この記事を書いた人

山本早希

Vue.js