【Vue.js】:classと:styleについて

2021年5月1日Vue.js

Vue jsの:classと:styleについて簡単に違いをまとめました。

:classと:styleについて

• :classと:styleは基本的に同じ
• :styleはcssのプロパティをそのまま書くので、保守しにくい
• :classはcssのクラス名を書くので、色など変更しやすい
• ただし:styleを使ったほうが便利な場合もある

たとえば、進捗状況の表示などの動的に変化した状態でcssを適用したい場合は、styleのほうがスッキリする場合があります。
進捗状況の表示方法は、Vue.jsでライブラリを使わずに進捗バーの表示する方法を参考にしてみてください。

:classと:styleは基本的に同じ

<!-- :styleの場合 -->
<button @click="skipQuestion" :style="!isQuestionAnswered ? 'background-color: rgb(100, 120, 190)': ''">スキップ</button>
<button @click="nextQuestion" :style="isQuestionAnswered ? 'background-color: rgb(100, 120, 190)': ''">>次へ</button>
<!-- :classの場合 -->
<button @click="skipQuestion" :class="!isQuestionAnswered ? 'selectable': ''">スキップ</button>
<button @click="nextQuestion" :class="isQuestionAnswered ? 'selectable': ''">>次へ</button>

:classの場合は別途cssでクラスを宣言します。

.box-button button.selectable {
background-color: rgb(100, 120, 190);
}

:styleのほうがいい場合

<!-- 進捗表示 -->
<div
 class="step-progress"
 :style="('width: ' + progress + '%')">
</div>

上のように、たとえば、25%、50％、75％、100％になったときに動的に幅を変化してcssを適用したい場合は、:styleのほうがスッキリする場合があります。