条件分岐

北海道コロナ週実績のjsonファイルを使ったウェブサイトをNuxt3で制作する中で、ぶち当たった壁の一つ。v-bindでclassを使い、条件によって付与するclass名を変えるというもの。検索すると、だいたい三項演算子で、2つのclass名のどちらかを割り当てるケースがほとんどでした。そのため、わざわざv-ifで空タグつくって条件分岐するのかなと思っていましたが、あっさり解決しました。

Vue.js

Vue.js - The Progressive JavaScript Framework

よく読んでみると、入れ子ができそうな雰囲気で、過去に見たパターンがありました。それで三項演算子を入れ子にしてみたところ、希望する結果がえられたのです。ナイス！下記はv-forの中でfixedpointの値によって、違うクラスを使う例です。30以上だとwarningが、10～30ではadvisoryが、1～9までがtrend、それ以外の0の場合はalertがclass名として付与されます。これで背景色を変えることができます。

<p :class="[ 30 <= item.fixedpoint ? 'warning' : 
 [10 <= item.fixedpoint && item.fixedpoint < 30 ? 'advisory' :
 [item.fixedpoint < 10 && 0 < item.fixedpoint ? 'trend' :
 'alert']]]" class="alert" ></p>