[Vue.js] v-bindでクラス付けかえの基本

クラスの付けかえ

v-bind:属性名（例：v-bind:src）などでVueのdataやcomputedと紐づけることができる。

以下は、isOpenの値がTrueの場合、open_class_nameが付与され、そうでなければ何も付与されない。

app.vue

<script>
export default {
  data() {
    return {
      isOpen: true
    }
  }
}
</script>

<template>
  <input
    v-bind:class="[isOpen ? 'open_class_name' : '']"
  >
</template>

<style scoped>
.open_class_name {
  background-color: #787
}
</style>

デフォルトのclassがある場合は別にした方が個人的には見やすい。

demo.vue

<!-- 一緒にまとめる -->
<input
   v-bind:class="[isOpen ? 'open_class_name' : '' ,'default_class_name']"
>

<!-- 別にする -->
<input
  class="default_class_name"
  v-bind:class="[isOpen ? 'open_class_name' : '']" 
>

その他備忘録

• styleはオブジェクトにしてcomputedで指定することが多い。
• v-bindは最近ではほとんどセミコロンで省略されて書かれる。（例 :class、:src、:style）