概要
スタイルのバインディング(v-bind:style or :style)と三項演算子を駆使して、CSSのスタイル変更ができないか考えてみました。その方法を備忘録も含めて記載します。
バージョン or 条件
- CDNを使用してVue.jsの環境を構築 [参考資料(公式)] Using Vue from CDN
- バージョンはVue.js 3系を使用
手順方法
HTMLのタグに、下記のコードv-bind:style or :styleのどちらかを使用して記入する。
この方法を使用する場合は、v-forやv-slotと組み合わせて使用する必要があります。
<!-- spanタグ以外にも適用可能です -->
<span v-bind:style="{ プロパティ : [ 真偽値 ? 条件1: 条件2 ]}">
{{ test }}
</span>
<!-- or -->
<span :style="{ プロパティ : [ 真偽値 ? 条件1: 条件2 ]}">
{{ test }}
</span>
実際の使用例
v-forで設定したindexの値が1の時、赤色の文字が表示される。それ以外は、青色の文字が表示される。
See the Pen Untitled by kengo-sk8 (@kengo-sk8) on CodePen.
感想
今回は、CODEPENを使用して、実際の作成したviewを見れるように書いてみました。今後、view関連で記事を書く際は、CODEPENを使用して分かり易くまとめたいと思います。記事とは関係ない感想ですいませんw