vue.jsでclass属性にv-bindしてみる

2021年1月3日

vue.jsでclass属性にv-bindしてみる

備忘録としてのセておきたいと思います。

書式

書式は下記の通りです。

<要素名 v-bind:class="{ class名: class名を出力する条件式 }">

プログラム

ひとつ気を付けるところはclass名はキャメルケースにすると言う事です。ケバブケースにすると下記のようなエラーが発生します。

- invalid expression: Unexpected token '-' in xxx...

ざっくりと例を載せておきたいと思います。これで「Hello World!!」が「赤文字」で表示されます。
【HTML】

<div id="app">
  <p v-bind:class="{ worningMessage: isWorning }">Hello World!!</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="main.js"></script>
<link rel="stylesheet" href="style.css">

【JS】

var app = new Vue({
  el: '#app',
  data: {
    isWorning: true
  }
})

【CSS】

.worningMessage{
  color: red;
}